React项目中调用useState的setState后state未更新如何解决

问题原因 #

• 函数组件的每一次渲染都对应独立的快照作用域，本次渲染周期内所有变量、函数拿到的都是当前快照的固定值，你执行setName时所在的作用域里，name已经被固定为初始值Old
• setState操作不会立即修改当前作用域的state变量，React会将更新推入队列，批量触发重渲染后，新渲染周期的state才会是更新后的值
• useState的set方法原生不支持类组件setState的回调参数，这是React Hook的设计规则

解决方案 #

方案1：用useEffect监听目标state变化 #

如果需要在state更新后执行后续逻辑，把对应逻辑放到依赖项包含该state的useEffect中即可。另外你原示例中的useEffect没有填写依赖数组，会在组件每一次渲染完成后都执行，反复触发setName造成不必要的重渲染，建议根据实际业务需求补充依赖项，仅需首次挂载执行就传空数组[]：

const [name, setName] = useState("Old");

// 仅首次挂载时执行更新逻辑
useEffect(()=>{
    setName("New");
}, []);

// 监听name变化，每次name更新后自动执行
useEffect(()=>{
    console.log(name); // 重渲染后会打印最新值New
}, [name]);

方案2：更新时基于旧state计算新值 #

如果是需要基于最新的旧state来计算新的state值，可以给set方法传入函数，函数的入参就是当前最新的state值：

setName(prevName => {
  // prevName 始终是最新的未更新前的name值
  return prevName + '测试后缀'
})

内容的提问来源于stack exchange，提问作者Abraham