意外的状态更新导致&quot；useState&quot；函数 [英] Unexpected state update results in "useState" function

问题描述

考虑这个简单的例子，其中一个函数用于更新useState对象：

App.tsx

import { useState } from 'react';

export default function App() {

  const [state, setState] = useState({
    id: 0,
  });

  const update = () => {

    setState(prev => {
      const id = Date.now();
      console.log('previous id:', prev.id, 'new id:', id);
      return {
        id,
      };
    });

  };

  return (
    <div>
      <div>state: {JSON.stringify(state)}</div>
      <button onClick={update}>Update</button>
    </div>
  );
}

将其放入标准的创建-反应-应用程序类型脚本模板(使用REACT 17.0.2)，并在开发模式下运行应用程序。继续点击UPDATE按钮，观察控制台。很快就会出现预期状态和实际状态之间的差异，例如

previous id:  1636301326090  new id:  1636301326260
previous id:  1636301326260  new id:  1636301326440
previous id:  1636301326440  new id: *1636301326611*
previous id: *1636301326612* new id:  1636301326804  // What???
previous id:  1636301326804  new id:  1636301326997

在上面的控制台日志中，id: 1636301326612状态不知从何而来，因为正在设置的状态是id: 1636301326611。

奇怪的是，当应用程序是为生产而构建的时候，我不能重现这一点。此外，如果我放弃函数更新，只是将对象传递给setState，就像在注释掉的代码中一样(由于原子性要求，在我的实际非玩具代码中是不可行的)，这个问题似乎也不存在。

我完全不知所措。我是不是用错了setState？

如有必要，我可以提供完整的回购示例。

推荐答案

这可能是因为在开发中以严格模式调用了两次setState。
设置状态值不取决于先前的值，而取决于时间。这是副作用。

相关链接
https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects https://github.com/facebook/react/issues/12856

这篇关于意外的状态更新导致&quot；useState&quot；函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！