React中await获取的数组可见内容但length为0无法map如何解决

问题原因 #

• setState 是异步API，调用后不会立刻更新this.state的值，如果你在setState调用行之后立刻读取状态，拿到的还是更新前的旧值（也就是初始的空数组）。
• Chrome控制台对引用类型的打印存在「懒计算」特性：打印时只会记录引用的快照，你点击展开数组时才会读取内存中最新的值，所以才会出现「打印时length为0，展开后能看到数据」的矛盾现象，本质是你打印的时机早于状态更新完成的时机。
• 你代码中对data二次加await是多余操作，await getGameData()已经拿到了解析完成的返回值，不需要再次await。

修复方案 #

1. 修正setState写法，用回调验证状态更新 #

setState支持传入第二个参数作为更新完成的回调函数，你可以在回调中读取更新后的状态：

async componentDidMount() {
  const data = await getGameData()
  this.setState({
    games: data
  }, () => {
    // 此处可以拿到更新完成的最新状态
    console.log(this.state.games.length)
  });
}

2. 渲染时加兜底判断避免map报错 #

在组件渲染时先判断数组是否存在且有值，再执行map操作，避免状态还未更新时访问空数组导致报错：

render() {
  const { games } = this.state;
  return (
    <div>
      {games && games.length > 0 ? (
        games.map(item => <div key={item.id}>{/* 你的渲染逻辑 */}</div>)
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  )
}

如果以上操作完成后还是存在length为0的问题，可以检查getGameData的返回值是否是标准数组，是否存在返回类数组对象、代理对象的情况，必要时可以用Array.from(data)做一层转换再存入state。

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