javascript - 间隔获取设置状态如何与 React 挂钩中获取的数据同步？

Question

如果返回的数据不为空，我有一个获取数据和更新状态的间隔。不知何故，如果返回的数据被更新并调用了设置状态，它最终将停止重新渲染，并且状态将匹配设置之前的数据并停止重新渲染：

const [taskData, setTaskData] = useState({
   to_do: {
     title: 'To Do',
     tasks: [],
   },
   unassigned: {
     title: 'Unassigned',
     tasks: [],
   },
 });

useInterval(() => {
   const getTasksData = async () => {
     data = await getData();
     console.log('data ', data.data.to_do);
     console.log('task data', taskData.to_do);

     if (data.data !== null) setTaskData(data.data);
   };
   if (hasAccessToken) getTasksData();
 }, 5000);
...
return (
   <>
      {console.log('Rerender')}
   </>

这就是 console.log 的样子：

Rerender
data  {title: "To Do", tasks: Array(3)}
task data {title: "To Do", tasks: Array(0)}
Rerender
data  {title: "To Do", tasks: Array(4)}
task data {title: "To Do", tasks: Array(4)}
Rerender
data  {title: "To Do", tasks: Array(5)}
task data {title: "To Do", tasks: Array(5)}
data  {title: "To Do", tasks: Array(6)}
task data {title: "To Do", tasks: Array(6)}
data  {title: "To Do", tasks: Array(7)}
task data {title: "To Do", tasks: Array(7)}

注意渲染是如何停止的

标签： javascriptreactjsreact-hooks