javascript - 我可以从 setTimeout() 调用 setState() 吗？

Question

我的组件中有以下代码:

• 我通过使用 setPosition(-0.08) 调用 setState 来开始弹跳效果
• 然后，我使用 ref 来存储 setTimeout，并在 350 毫秒后调用 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;
    }
}

它按预期工作!

问题

有什么理由让我不应该这样做(从一个调用 setStatesetTimeout)？

Answer 1

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

但在你的情况下，你应该将代码移动到 useEffect 钩子(Hook)，否则可能会导致副作用。

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

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