React Native状态更新异常：setState后state.data为空

先看你提供的代码：

makeRemoteRequest = () => { 
  let items = []; 
  models.forEach(element => { 
    //models是模型列表数组
    this.pushReports(element, items); 
  }); 
  console.log("This is the item array: ",items); 
  this.setState({ data:items }); 
  console.log("This is the data in state: ",this.state.data); 
}

你遇到的这个问题其实是React中setState的异步特性导致的，这是个非常常见的React新手坑～

问题原因 #

setState并不是同步执行的，React为了优化性能，会把多个setState调用合并成一次批量更新。所以当你在setState之后立刻打印this.state.data时，此时状态还没有完成更新，你看到的只是更新前的旧值；而items是当前同步代码块里创建的变量，它的内容已经填充完成，所以日志能正确显示。

解决方法 #

想要正确获取更新后的状态，有两种常用方式：

1. 使用setState的回调函数
   setState的第二个参数是一个回调函数，它会在状态更新完成、组件重新渲染后执行，你可以在这里安全地访问更新后的state：

this.setState({ data:items }, () => {
  console.log("This is the updated data in state: ",this.state.data);
});

2. 在componentDidUpdate生命周期中处理
   如果需要在状态更新后执行更复杂的逻辑，可以在componentDidUpdate钩子中判断状态变化后再操作：

componentDidUpdate(prevProps, prevState) {
  // 确保是data状态发生变化时才执行
  if (prevState.data !== this.state.data) {
    console.log("This is the updated data in state: ",this.state.data);
    // 这里可以添加状态更新后的业务逻辑
  }
}

另外补充一句：如果你的pushReports方法涉及异步操作（比如网络请求、定时器），那items的填充也可能存在异步问题，但从你当前的日志来看items是正常的，所以暂时先聚焦解决setState的异步问题即可～

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