我可以从settimeout()调用setState()

Question

我的组件中有以下代码：

• 我通过使用setPosition(-0.08)
调用SetState开始跳动效果
• 然后，我正在使用 Ref 在350ms之后拨打setPosition(0)的setTimeout。

function changeImage(dir) {
  const isBouncing = useRef(false);
  const bounceTimeout = useRef(null);
  // ... some other code
  if (dir === 'LEFT' && selected === 0) {
      isBouncing.current = true;
      setPosition(-0.08);
      bounceTimeout.current = setTimeout(()=> { 
        isBouncing.current = false;
        setPosition(0);
      }, 350);
      return;
    }
}

它按预期工作！

问题

有什么原因我不应该这样做(从一个调用setState setTimeout(？

Answer 1

您可以从setTimeout调用setState。例如，这是实现动画的方法之一。

但是，在您的情况下，您应该将代码移至useEffect钩子，否则可能会引起副作用。

您还需要清除卸载时的超时

useEffect(() => {
  return () => {
    if (bounceTimeout.current !== null) {
      clearTimeout(bounceTimeout.current)
    }
  }
}, [])