React useState异步更新和for循环

Question

我有一个看似基本的问题，不断设置我的项目-useState不正确地为我呈现。

以下是问题的简化版本:

function App() {
const [count, setCount] = React.useState(0);
function TestFunction() {
for (let i = 0; i < 10; i++) {
setCount((curr) => curr + 1);
console.log(count);
}
}
return (
<>
<h3>Count = {count}</h3>
<button onClick={() => TestFunction()}>Click</button>
</>
);
}
export default App;

单击按钮后，状态被设置为10，但是console.log()没有正确更新。

任何帮助都是感激的。

感谢s

Answer 1

我希望这回答了你的问题

首先，你的日志计数尚未更新为当前渲染。所以基本上console.log落后一步。检查下面的代码，这可能会澄清一切。

function Temp() {
const [count, setCount] = React.useState(0);
function TestFunction() {
for (let i = 0; i < 10; i++) {
setCount((curr) => {
console.log(curr);
return curr + 1;
});
console.log(count);
}
}
return (
<>
<h3>Count = {count}</h3>
<button onClick={() => TestFunction()}>Click</button>
</>
);
}
export default Temp;```

Answer 2

在使用最新值更新count之前记录它。简单地说，当setCount被调用时，React存储提供给它的值，直到下一次渲染。当下一次渲染发生时，count值将被更新。

在我的例子中:

• 每次state更新时，下面的useEffect将被击中。
• setState(curr=>curr+1)将通知您当前的下一个状态值是什么。

const {
useState,
useEffect
} = React;
function App() {
const [state, setState] = useState(0);
// Console.log on state update
useEffect(()=>{
console.log(`useEffect: ${state}`);
},[state]);

function TestFunction() {
for(let i = 0; i < 10; i++) {
setState((curr)=>{
console.log(`setState(nextValue): ${curr+1}`);
return curr+1;
});
}
}
return (
<div>
<h3>Count = {state}</h3>
<button onClick={TestFunction}>Click</button>
</div>
);
}
const el = document.querySelector("#root");
ReactDOM.render(<App/>, el);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

希望这能澄清一切。