【react】hook中useState设置数据不能立即反映更改_react hooks setstate无法立即-CSDN博客

在业务代码中使用useState时发现，当我把一个修改后当数据set进state里面后，再次打印state中那个数据是初始状态的值，并未发生改变

const [list, setList] = useState([]);

// 下面在某个方法里面调用
console.log(list); // []
setList([1,2,3]);
console.log(list); // []

类似于通过扩展React.Component或创建的class组件中的setState
React.PureComponent使用useState钩子更新状态也是异步的。

同样，这里的问题不仅是异步的性质，而且函数更新状态的当前闭包和状态更新使用状态值这一事实将放映在下一次重新渲染中，现有的闭包不会收到影响，而是会创建新的闭包。现在，在当前状态下，挂钩中的值是由现有的闭包获得的，并且在重新渲染时，将根据是否再次创建函数来更新闭包。

即使添加了一个setTimeout函数，尽管超时将在重新渲染的一段时间后运行，但setTimeout仍将使用其先去关闭而不是更新后的值。

如果要对状态更新执行操作，则需要使用useEffect钩子，就像componentDidUpdate在类组件中使用一样，因为useState返回的setter没有回调模式

useEffect(() => {
	//action on update of list
}, [list]);

就更新状态的语法而言，setList(result)将状态中的先前list值替换为异步请求中可用的值
但是，如果要将响应与以前存在的值合并，则必须使用状态更新的回调语法以及正确使用的扩展语法，例如

setList(prevList => ([...prevList, ...result]));