React useState异步代码没有更新？-灵析社区
梦想缔造狮背景： React代码如下 import { useState } from 'react'; export default function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); setTimeout(() => { console.log(count, 'end'); // 还是 0! }, 5000); } return ( +1 {count} ); } setCount的更新是异步更新的，setTimeout也是异步的，为什么点击，console.log打印的是0，而不是1。 尝试： 尝试用普通js函数进行比较，js代码如下 function outerFunction() { let count = 0; function innerFunction() { console.log(count); } count = 1; // 将count更新为1 setTimeout(innerFunction, 5000); count = 2; } outerFunction(); console.log打印的是最新的值2。 疑问： 两段代码的打印结果不同，是什么原因呢？
春暖花又开setTimeout(() => {
console.log(count, 'end'); // 还是 0!
}, 5000);
你可以把"react"组件的每次渲染理解为生成了一个平行宇宙。
初始化渲染时生成的平宇宙，其"count"值为"0"，所以就算定时器延迟一年执行，它也只能输出"0"。
当你调用"setCount(count + 1)"，这触发了第二次渲染，又生成了一个平行宇宙，这个平行宇宙中的"count"是"1"，这个宇宙中的定时器也就只能输出"1"。
去掉定时器帮助理解
const handleClick = () => {
setCount(count + 1);
console.log(count, 'end');
}
// 两者其实是一样的，加上定时器并不会让count拥有穿透平行宇宙的能力
const handleClick = () => {
setCount(count + 1);
setTimeout(() => {
console.log(count, 'end');
}, 5000);
}