为什么 useState 多次更新不生效？

问题

在编写 React 代码时，如果你希望多次更新状态，可能会尝试使用 handleClickWrong 中的方式。然而，你会发现实际效果并不如预期：count 只增加了 1，而不是 3。

1. const root = document.getElementById('root');
3. const App = () => {
4.   return (
5.    
6.       <h1>Hello World</h1>
7.       <Counter />
8.    
9.   );
10. };
12. const Counter = () => {
13.   const [count, setCount] = React.useState(0);
15.   const handleClickWrong = () => {
16.     setCount(count + 1);
17.     setCount(count + 1);
18.     setCount(count + 1);
19.   };
21.   return (
22.    
23.       <h1>{count}</h1>
24.       <button onClick={handleClickWrong}>Increment</button>
25.    
26.   );
27. };
29. const rootElement = ReactDOM.createRoot(root);
30. rootElement.render();

复制代码

为什么会出现这种情况呢？要弄清楚这个问题，我们需要了解 React 如何处理状态更新的细节。
React 内部状态更新机制

React 使用了一个内部机制来处理状态更新。我们可以通过以下源码片段了解这背后的实现：

1. // React 源码中的基本状态处理器
2. function basicStateReducer(state, action) {
3.   // $FlowFixMe: Flow doesn't like mixed types
4.   return typeof action === 'function' ? action(state) : action;
5. }

复制代码

在我们使用 handleClickWrong 的情况下，React 会按照以下方式处理状态更新：

1. // 假设初始状态为 0，我们传递的值是 1
2. newState = basicStateReducer(0, 1);

复制代码

由于 basicStateReducer 接收到的 action 不是函数，它会直接返回这个值作为最新状态。因此，newState 会被更新为 1。
回到 handleClickWrong 的例子：

1. const handleClickWrong = () => {
2.   setCount(count + 1); // = basicStateReducer(0, 1) => 1
3.   setCount(count + 1); // = basicStateReducer(0, 1) => 1
4.   setCount(count + 1); // = basicStateReducer(0, 1) => 1
5. };

复制代码

由于 count 在当前 Counter 函数的作用域内，三次 setCount 调用的值都是 count + 1。因此，即使调用了多次 setCount，由于 React 只处理了最新的 count 值，结果每次都将状态更新为 1。最终渲染时，count 依然只有 1。
解决方案

了解了原因后，我们可以改用函数形式的更新来解决这个问题。注意到 basicStateReducer 会检查传入的 action，如果是函数，React 会用当前内部存储的状态作为参数传给这个函数。这样，我们可以基于最新的状态进行更新。

1. const handleClick = () => {
2.   setCount((prevCount) => prevCount + 1); // = basicStateReducer(0, (prevCount) => prevCount + 1) => 0 + 1 => 1
3.   setCount((prevCount) => prevCount + 1); // = basicStateReducer(1, (prevCount) => prevCount + 1) => 1 + 1 => 2
4.   setCount((prevCount) => prevCount + 1); // = basicStateReducer(2, (prevCount) => prevCount + 1) => 2 + 1 => 3
5. };

复制代码

通过使用函数形式的更新，我们可以确保每次状态更新都基于前一个状态，从而实现预期的结果。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！