时间戳

首页 > 解决方案 > 反应 setInterval 状态未更改/更新

reactjs - 反应 setInterval 状态未更改/更新

问题描述

也许我错过了一些东西，但我找不到解决方案。

我有一个 React 组件，想要运行一些周期性的后台作业 (setInterval) 这个作业使用组件状态的一些信息，并且应该能够改变它。

我的组件：

export default function Form() {
   const [state, setState] = useState<IState>(initialState);
   useEffect(() => {
      //init component and other stuff
     
      // trigger background Task
      setInterval(backgroundJob, 10000);

   }, []);

   function backgroundJob(){
      state.xxx
   }

   function handleButtonClick(){
     state.xxx = state.xxx + 1;
     setState({
       ...state,
     });
   }   
}

主要问题是， backgroundJob 函数能够访问状态，但它只是initalState. 如果更新了，（例如，通过函数state单击按钮），下一个间隔刻度在handleButtonClick()state

我在这里误解了一些基本概念吗？

标签： reactjs

解决方案

您需要添加backgroundJob到您的依赖项列表，但还需要在重新运行效果时清除此间隔：

请注意，在您编写代码的方式中，每次组件呈现时都会发生这种情况。如果需要，您可以使用useCallback进行优化。

useEffect(() => {
  //init component and other stuff
  // trigger background Task
  const intervalId = setInterval(backgroundJob, 10000);

  return () => clearInterval(intervalId)

}, [backgroundJob]);

如果不这样做，backgroundJob您正在运行的是来自第一个渲染的那个，它只“看到”（通过它的关闭）初始状态（AKA Stale Closure）

推荐阅读