React中Fetch获取JSON后无法访问数组属性的问题排查

嘿，这个问题我之前也碰到过，核心是异步操作的执行顺序加上一个容易忽略的数组操作小错误，咱们一步步理清楚：

首先，fetch是异步函数，它发起请求后不会等着响应回来再执行后面的代码。你现在的代码里，console.log(data)、console.log(data[1].name)这些语句，会在fetch的回调函数（也就是.then里的代码）之前就运行，这时候data数组还没被填充，自然拿不到数据。

另外还有个关键问题：你请求回来的result本身就是一个数组（[{...}, {...}]），你用data.push(result)会把整个数组作为一个元素塞进data里，最终data会变成[[{...}, {...}]]——也就是二维数组，哪怕请求完成了，data[1]也是不存在的，这也是报错的直接原因之一。

解决方案1：在异步回调里处理数据 #

把需要访问数据属性的代码放在fetch的.then回调里，确保只有拿到数据后再操作：

var React = require('react');
var CreateReactClass = require('create-react-class');
var url = "192.168.1.1:8081/json";

fetch(url)
  .then(response => response.json())
  .then(result => {
    // 直接把返回的数组赋值给data，不用push
    const data = result;
    console.log(data); // 输出完整数组
    console.log(data[1].name); // 这里就能正常打印"le"了
  })
  .catch(error => {
    // 别忘了处理请求失败的情况
    console.error('请求出错:', error);
  });

解决方案2：用async/await让代码更清晰 #

如果觉得链式.then看着麻烦，可以用async/await语法，让异步代码看起来像同步执行：

var React = require('react');
var CreateReactClass = require('create-react-class');
var url = "192.168.1.1:8081/json";

// 定义一个异步函数
async function loadData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    console.log(data[1].name); // 同样能正确获取"le"
  } catch (error) {
    console.error('请求失败:', error);
  }
}

// 调用这个异步函数
loadData();

最后解释下你看到的“奇怪现象”：为什么控制台里看起来data有内容但长度显示0？那是浏览器控制台的小特性——它会实时更新引用类型的显示。当你点开控制台里的data时，异步请求已经完成，数据已经被填充进去了，但在执行console.log(data)的那一刻，它确实是空数组，长度为0。

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