在Promise链中使用React Hook状态值时出现undefined的原因及解决方法

核心原理 #

• 状态更新的异步批处理机制：通过useState返回的setMessage方法，调用后不会同步修改当前执行上下文中的message变量，仅会向React调度系统标记需要重新渲染，等组件重渲染完成后，才会生成新的message值绑定到新的渲染周期上下文中。
• 闭包快照捕获特性：signIn函数是在组件某次渲染时创建的，它内部引用的message是创建时刻的快照值。当后续Promise回调执行时，哪怕已经通过setMessage触发了状态更新，当前闭包内的message依然停留在创建时的初始值undefined，和实际更新后的状态没有关联。

组件渲染逻辑可以正常使用message，是因为JSX本身就是每次渲染周期内重新生成的，使用的是当前渲染周期的最新快照值，不受旧闭包影响。

适配重定向需求的实现方式 #

针对请求成功后需要判断消息状态触发重定向的场景，完全不需要依赖state值做判断。因为请求响应本身就携带了完整的message数据，直接通过Promise链的返回值传递即可，不需要处理state异步更新的问题。

修改后的signIn函数核心逻辑：

const signIn = (e) => {
    e.preventDefault();
    axios.post('/api/auth/signin/', { email, password }, {
        headers: {
            'Content-Type': 'application/json'
        },
        withCredentials: true
    }).then((res) => {
        const data = res.data;
        // 正常更新state供页面渲染使用
        setUser(data.user)
        setMessage(data.message)
        // 把需要做判断的message值通过Promise返回值向下传递
        return data.message
    }).then((currentMessage) => {
        // 这里直接接收上一步传递的message值，不受闭包快照影响
        if (currentMessage.status !== 'error'){
            router.push('/app/profile/')
        }
    }).catch((err) => {
        console.log(err)
    })
}

注意事项 #

• 不要在setMessage调用后的同异步流程中立刻读取messagestate值做判断，永远无法获取到更新后的最新值。
• 该场景下不需要通过useRef存储最新state解决问题，属于过度设计。
• 不要把重定向逻辑绑定到useEffect监听message变化的回调中，会引入不必要的副作用触发风险。

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