Reactjs React 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,
     });
   }   
}

导出默认函数表单（）{
常量[状态，设置状态]=使用状态（初始状态）；
useffect（（）=>{
//init组件和其他东西
//触发后台任务
设置间隔（背景作业，10000）；
}, []);
函数backgroundJob（）{
state.xxx
}
函数handleButtonClick（）{
state.xxx=state.xxx+1；
设定状态({
……国家，
});
}   
}

主要问题是，backgroundJob函数能够访问状态，但它只是

initalState

。如果更新了

状态

（例如，通过

handleButtonClick（）

函数在按钮上单击），则下一个间隔勾号在

状态中仍有旧值

---

我是否误解了一些基本概念？

您需要将

backgroundJob

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

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

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

  return () => clearInterval(intervalId)

}, [backgroundJob]);

---

如果不这样做，您正在运行的

backgroundJob

是第一次渲染中的一个，它只“看到”（通过其闭包）初始状态（AKA）

您可以添加这个沙盒吗？我只是问了差不多相同的问题：和reading:解决了我的问题。不幸的是，这不能很好地解决我的问题。我的状态经常更改，因此此解决方案通常会清除间隔并重新启动它。因此，如果我的状态每秒更改一次，后台作业将永远不会执行：-（您可以使用

useCallback

仅依赖于状态的特定部分，或者使用

useRef

查看经常更改的值