React Native Expo中setState更新state变量后日志为空的问题排查

核心问题根因 #

两个逻辑错位共同导致了打印值始终为空的现象：

• 异步调用链路断裂，执行顺序完全错位
  你定义的firebaseInformation虽然加了async修饰，但内部的firebase.database().ref().once()是异步IO操作，当前代码没有把这个操作的Promise正确透传到函数外层，导致grabToken中调用this.firebaseInformation()时，根本不会等待内部数据库请求、数组组装、setState的全流程执行完成，就立刻执行后续的console.log，此时tokenArr还停留在初始化的空数组状态。
• 对setState的更新时机存在认知偏差
  React Native中的setState本身是异步批量更新逻辑，就算setState的代码同步执行，也不会立刻覆盖this.state的引用值，要等组件完成重渲染周期后，this.state的变量值才会真正更新。如果在setState的同一调用栈内直接读取state，拿到的永远是更新前的旧值。

修正实现代码 #

把异步链路的await逻辑打通，正确感知更新时序：

constructor() {
    super()
    this.state = {
        tokenArr: []
    }
}

componentDidMount() {
    this.grabToken()
}

firebaseInformation = async () => {
    // 直接await读取数据库快照，把异步操作的Promise链路打通
    const snapshot = await firebase.database().ref(`tokens/`).once('value')
    const tokenValues = Object.values(snapshot.val())
    // 直接通过map生成新的token数组，避免依赖外部临时变量的引用
    const tokens = tokenValues.map(item => item.data)
    // 触发state更新
    this.setState({ tokenArr: tokens })
    // 把处理完成的数组作为返回值传出，供外层逻辑直接使用
    return tokens
}

grabToken = async () => {
    // 等待firebaseInformation的全异步流程执行完成后再执行后续逻辑
    const latestTokenArr = await this.firebaseInformation()
    // 这里可以直接拿到最新的token数组验证值是否正确
    console.log('处理完成的最新token数组：', latestTokenArr)
    // 如果需要确认state的更新结果，可以通过setState的完成回调读取最新值
    this.setState({ tokenArr: latestTokenArr }, () => {
        console.log('setState更新完成后的state值：', this.state.tokenArr)
    })
}

补充注意事项 #

• 不要在异步API的回调函数中直接return值给外层async函数，这类回调的return值不会被外层async逻辑捕获，会直接打断Promise链路。
• 验证state更新结果时，不要依赖同步代码的执行时序，要么通过函数返回值拿处理后的数据，要么使用setState的第二个参数（更新完成回调）读取最新的state值，避免出现拿到旧值的情况。

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