考虑这个简单的例子,其中一个函数用于更新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
上一篇:实体框架5.0的PostgreSQL(Npgsql)默认连接工厂实体、框架、工厂、Npgsql
下一篇:有没有一种方法可以创建一个通用的输出流对象,以便在控制台上打印并在C++中打印到文件中?并在、创建一个、台上、对象