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

Question

快速总结

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

我这样做的方式涉及一个setTimeout()带有回调的回调，该回调检查状态。由于某种原因，回调从调用之时开始使用状态setTimeout()，而不是在调用回调时（1秒后）使用状态。

您可以在codesandbox上查看

我如何做到这一点

为了获得此功能，我打电话给setTimeOut()onMouseDown。我还将状态中的isHolding设置为true。

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

回调setTimeOut()将检查isHolding是否为true，如果为true，则它将运行clickHoldHandler()，这是一个支持。

问题

isHolding处于状态（我正在使用钩子），但是在setTimeout()触发它的回调时，我没有返回当前状态，而是setTimetout()第一次调用该状态时的状态。

我的代码

这是我的做法：

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

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

  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;