React中fetch API存数据到state后console.log返回空对象如何解决？

嘿，这个问题我太熟了！本质上是因为React的setState是异步操作，再加上fetch本身就是异步请求，所以你直接在setState之后调用console.log(this.state.api)，代码执行顺序根本不是你预想的那样。

为什么会出现这种情况？ #

1. fetch是异步的：浏览器会先执行fetch之后的代码，等请求返回数据后才会进入then回调。
2. setState是异步批量更新：React为了性能优化，不会在调用setState后立刻更新state，而是会把多个setState操作合并后再更新。所以当你在setState之后马上console.log，拿到的还是更新前的旧state值。

几种实用的解决方法 #

方法1：使用setState的第二个回调函数

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

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
  .then(response => response.json())
  .then(data => { 
    this.setState(
      {api: data[0], loading: false},
      // state更新完成后触发的回调
      () => {
        console.log(this.state.api); // 现在能拿到正确的对象数据了
        // 依赖最新state的逻辑也可以写在这里
      }
    ) 
  })

方法2：通过componentDidUpdate生命周期监听state变化

如果你的逻辑比较复杂，适合在类组件的componentDidUpdate生命周期里处理，它会在组件更新后触发，你可以在这里判断api状态是否变化：

componentDidUpdate(prevProps, prevState) {
  // 只有当api状态发生变化，且加载完成时才执行逻辑
  if (prevState.api !== this.state.api && !this.state.loading) {
    console.log(this.state.api);
    // 这里可以写渲染UI相关的处理逻辑
  }
}

方法3：渲染UI时结合loading状态做判断

为了避免UI渲染时遇到空数据的问题，一定要利用loading状态做分支渲染，确保只有数据加载完成后才渲染内容：

render() {
  const { api, loading } = this.state;
  
  // 加载中状态
  if (loading) {
    return <div>加载中...</div>;
  }
  
  // 没有数据的情况
  if (!api) {
    return <div>暂无游戏数据</div>;
  }
  
  // 数据存在时渲染内容
  return (
    <div className="game-card">
      <h2>{api.title}</h2>
      <p>最低价：${api.cheapest}</p>
    </div>
  );
}

核心思路就是：不要试图在setState之后立刻获取最新state，要尊重React异步更新的机制，通过回调、生命周期或者状态判断来处理后续逻辑。

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