在setTimeout中调用的函数不使用当前的React状态

Question

quick summary

我正在尝试创建一个按钮，该按钮既有常规点击，也有用户单击并按住它时发生的单独操作，类似于Chrome中的后退按钮。

我这样做的方式涉及带有回调的setTimeout()，用于检查状态中的某些东西。由于某种原因，回调是在调用setTimeout()时使用状态，而不是在调用回调时（1秒后）。

你可以在codesandbox上查看

how I'm trying to accomplish this

为了获得这个功能，我正在调用setTimeOut() onMouseDown。我还将isHolding设置为true。

onMouseUp我将isHolding设置为false并运行clickHandler()，这是一个prop，如果hold函数没有时间被调用。

setTimeOut()中的回调将检查isHolding是否为真，如果是，它将运行clickHoldHandler()，这是一个道具。

problem

isHolding处于状态（我正在使用钩子），但是当setTimeout()触发它的回调时，我没有回到当前状态，但是当setTimetout()被首次调用时状态是什么。

my code

我是这样做的：

const Button = ({ clickHandler, clickHoldHandler, children }) => {
  const [isHolding, setIsHolding] = useState(false);
  const [holdStartTime, setHoldStartTime] = useState(undefined);
  const holdTime = 1000;

  const clickHoldAction = e => {
    console.log(`is holding: ${isHolding}`);
    if (isHolding) {
      clickHoldHandler(e);
    }
  };

  const onMouseDown = e => {
    setIsHolding(true);
    setHoldStartTime(new Date().getTime());

    setTimeout(() => {
      clickHoldAction(e);
    }, holdTime);
  };

  const onMouseUp = e => {
    setIsHolding(false);

    const totalHoldTime = new Date().getTime() - holdStartTime;
    if (totalHoldTime < holdTime || !clickHoldHandler) {
      clickHandler(e);
    }
  };

  const cancelHold = () => {
    setIsHolding(false);
  };

  return (
    <button
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onMouseLeave={cancelHold}
    >
      {children}
    </button>
  );
};

Answer 1

您应该将该回调任务包装到reducer中并触发超时作为效果。是的，这使事情变得更加复杂（但这是“最佳实践”）：

  const Button = ({ clickHandler, clickHoldHandler, children }) => {
     const holdTime = 1000;
     const [holding, pointer] = useReducer((state, action) => {
        if(action === "down") 
           return { holding: true, time: Date.now()  };
        if(action === "up") {
          if(!state.holding)
              return { holding: false };
          if(state.time + holdTime > Date.now()) {
                clickHandler();
          } else {
                clickHoldHandler();
          }
          return { holding: false };
        }
        if(action === "leave")
          return { holding: false };
     }, { holding: false, time: 0 });

     useEffect(() => {
       if(holding.holding) {
         const timer = setTimeout(() => pointer("up"), holdTime - Date.now() + holding.time);
         return () => clearTimeout(timer);
       }
     }, [holding]);

     return (
       <button
         onMouseDown={() => pointer("down")}
         onMouseUp={() => pointer("up")}
         onMouseLeave={() => pointer("leave")}
       >
         {children}
        </button>
    );
  };

工作沙箱：https://codesandbox.io/s/7yn9xmx15j

---

如果减速器变得过于复杂，你可以记住一个设置对象（不是最佳实践）：

 const state = useMemo({
   isHolding: false,
   holdStartTime: undefined,
 }, []);

 // somewhere
 state.isHolding = true;