反应 setInterval 状态未更改/更新

Question

也许我遗漏了什么，但我找不到解决方案。

我有一个 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 中仍然具有旧值

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

Answer 1

你需要将backgroundJob添加到你的依赖列表中，但你需要在重新运行效果时清除这个间隔：

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

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

  return () => clearInterval(intervalId)

}, [backgroundJob]);

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