ReactJS中Axios请求API赋值对象后无法访问属性的问题排查

嘿，这个问题其实是React组件里异步请求的典型坑，我来给你拆解清楚：

你遇到的错误本质是API请求是异步的，而React组件的render方法会在API请求返回数据前就执行一次。

• 组件初始化时，apiData被设为空对象{}。第一次执行render时，API请求还在pending状态，此时apiData[0]是undefined，你试图访问undefined.game_id自然会抛出TypeError。
• 为什么你在控制台里能看到apiData和apiData[0]有数据？这是浏览器控制台的小陷阱——它显示的是对象的实时引用。当API请求完成后，apiData的状态被更新，控制台里的内容也会跟着刷新，但实际上第一次执行console.log(apiData[0].game_id)的时候，数据还没到。你可以试试把console.log(apiData)改成console.log(JSON.stringify(apiData))，就能看到第一次渲染时它确实是空对象。
• 而你直接声明的objTest是同步存在的变量，在render执行时已经有完整的数据，所以访问属性不会有问题。

1. 初始化时将apiData设为空数组 #

把state里的apiData: {}改成apiData: []，然后通过条件判断或可选链操作符安全访问属性：

state = {
  name : 'randomname',
  apiData: [] // 改为空数组
};

render() {
  const { name, apiData} = this.state;
  // 方式一：使用可选链操作符（ES2020+）
  console.log(apiData[0]?.game_id);
  // 方式二：条件判断
  if (apiData.length > 0) {
    console.log(apiData[0].game_id);
  }
  // ...
}

2. 在render中做前置判断 #

确保只有当数据存在时才访问属性，甚至可以先显示加载状态：

render() {
  const { name, apiData} = this.state;
  // 数据未就绪时显示加载
  if (!apiData[0]) {
    return <div className="wrap">Loading...</div>;
  }
  // 数据就绪后再访问属性
  console.log(apiData[0].game_id);
  return (
    <div className="wrap">
      TESTING
    </div>
  );
}

3. 使用可选链操作符简化判断 #

这是最简洁的写法，即使apiData[0]是undefined也不会报错，会直接返回undefined：

console.log(apiData[0]?.game_id);

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