React状态数组存储问题：setState后状态仍为空

你遇到的这个问题其实是React新手常踩的坑——setState是异步操作，它不会立刻修改组件的state值。

你在componentDidMount里调用setState后马上打印this.state.tabledata，这时候React还没完成状态更新，所以输出的还是初始化时的空数组。React为了优化性能，会把多个setState调用批量处理，不会同步执行状态更新。

这里给你两种解决方案：

方案一：使用setState的回调函数 #

setState支持传入第二个参数，这个回调函数会在状态更新完成、组件重新渲染后执行，此时你就能拿到最新的state：

componentDidMount() { 
  this.setState(
    { tabledata: [...this.state.tabledata, {"name": "name1"}] },
    // 状态更新完成后执行的回调
    () => {
      console.log("HI") 
      console.log(this.state.tabledata) // 这里输出的就是更新后的数组啦
    }
  )
}

方案二：函数式更新（推荐用于依赖前状态的场景） #

如果你的新状态需要依赖之前的state值，更推荐用函数式的setState，React会确保传入的prevState是最新的状态，避免异步更新带来的状态不一致：

componentDidMount() { 
  this.setState(prevState => ({
    tabledata: [...prevState.tabledata, {"name": "name1"}]
  }), () => {
    console.log("HI") 
    console.log(this.state.tabledata)
  })
}

简单总结一下：永远不要在调用setState后立刻读取state，想要获取更新后的状态，要么用回调函数，要么在组件重新渲染后的生命周期（比如componentDidUpdate）里读取。

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