为什么 useState 多次更新不生效？
问题在编写 React 代码时，如果你希望多次更新状态，可能会尝试使用 handleClickWrong 中的方式。然而，你会发现实际效果并不如预期：count 只增加了 1，而不是 3。
const root = document.getElementById('root');
const App = () => {
return (
<h1>Hello World</h1>
<Counter />
);
};
const Counter = () => {
const = React.useState(0);
const handleClickWrong = () => {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
};
return (
<h1>{count}</h1>
<button onClick={handleClickWrong}>Increment</button>
);
};
const rootElement = ReactDOM.createRoot(root);
rootElement.render();为什么会出现这种情况呢？要弄清楚这个问题，我们需要了解 React 如何处理状态更新的细节。
React 内部状态更新机制
React 使用了一个内部机制来处理状态更新。我们可以通过以下源码片段了解这背后的实现：
// React 源码中的基本状态处理器
function basicStateReducer(state, action) {
// $FlowFixMe: Flow doesn't like mixed types
return typeof action === 'function' ? action(state) : action;
}在我们使用 handleClickWrong 的情况下，React 会按照以下方式处理状态更新：
// 假设初始状态为 0，我们传递的值是 1
newState = basicStateReducer(0, 1);由于 basicStateReducer 接收到的 action 不是函数，它会直接返回这个值作为最新状态。因此，newState 会被更新为 1。
回到 handleClickWrong 的例子：
const handleClickWrong = () => {
setCount(count + 1); // = basicStateReducer(0, 1) => 1
setCount(count + 1); // = basicStateReducer(0, 1) => 1
setCount(count + 1); // = basicStateReducer(0, 1) => 1
};由于 count 在当前 Counter 函数的作用域内，三次 setCount 调用的值都是 count + 1。因此，即使调用了多次 setCount，由于 React 只处理了最新的 count 值，结果每次都将状态更新为 1。最终渲染时，count 依然只有 1。
解决方案
了解了原因后，我们可以改用函数形式的更新来解决这个问题。注意到 basicStateReducer 会检查传入的 action，如果是函数，React 会用当前内部存储的状态作为参数传给这个函数。这样，我们可以基于最新的状态进行更新。
const handleClick = () => {
setCount((prevCount) => prevCount + 1); // = basicStateReducer(0, (prevCount) => prevCount + 1) => 0 + 1 => 1
setCount((prevCount) => prevCount + 1); // = basicStateReducer(1, (prevCount) => prevCount + 1) => 1 + 1 => 2
setCount((prevCount) => prevCount + 1); // = basicStateReducer(2, (prevCount) => prevCount + 1) => 2 + 1 => 3
};通过使用函数形式的更新，我们可以确保每次状态更新都基于前一个状态，从而实现预期的结果。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]