React中state的set函数更新后取值为空 该如何排查解决

• React状态更新依托闭包快照特性：你当前执行的getTextFromApi函数属于本次渲染周期的闭包，内部访问的text永远是本次渲染初始化时的初始值（即你定义的空字符串""）。调用setText()仅会为下一次渲染的text变量赋值，不会修改当前闭包内的text取值。
• 状态更新为异步批量执行：setText触发后，React会将状态更新任务加入内部队列，等当前所有同步代码执行完成后才会批量处理更新、触发组件重渲染，重渲染后的组件才能拿到最新的text值。因此你在setText之后立即打印当前闭包里的text，拿到的还是更新前的旧值。

• 若要确认状态是否更新成功，直接在组件主体打印text即可，组件重渲染时会自动输出最新值：

const [text, setText] = useState("")
// 每次组件渲染都会打印当前周期的text值
console.log('当前text值：', text)

const getTextFromApi = async () => {    
    const resp = await fetch(endpoint)
    const data = await resp.json()
    setText(data)
}

• 若你需要在调用setText后立刻使用返回的结果，直接调用已拿到的data变量即可，无需从state中取值。

内容的提问来源于stack exchange，提问作者Jorge Sánchez