Question

我的组件中包含以下代码：

我通过使用setPosition(-0.08)调用setState开始反弹效果
然后，我使用 ref 存储setTimeout，并在350ms后调用setPosition(0)。

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）？

Answer 1

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

但是在您的情况下，您应该将代码移到useEffect钩子上，否则可能会导致副作用。

并且您还需要清除卸载超时

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

我可以从setTimeout（）调用setState（）吗？

1 个答案: