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添加到依赖项列表中，但还需要在重新运行效果时清除此间隔：

请注意，在编写代码时，每次组件渲染时都会发生这种情况。如果需要，您可以使用solution进行优化。

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

  return () => clearInterval(intervalId)

}, [backgroundJob]);

如果不这样做，您正在运行的backgroundJob是第一个渲染中的一个，它仅（通过其关闭）“看到”初始状态（又名useCallback）

反应setInterval状态未更改/更新

1 个答案: