如何获取并访问嵌套JSON数据？React数据渲染问题求助

问题场景 #

有一个包含多层嵌套的JSON数据，尝试用Object.keys()、Object.values()、Object.entries()方法在React中展示数据时，要么报错要么无内容显示。以下是原始的JSON数据和React代码：

原始JSON数据 #

{
  "data": {
    "finishedPercentage": 87.313,
    "inProgress": 234,
    "activeUsers": {
      "firstUser": [
        {
          "id": 6091438,
          "gpus": { "count": 2, "model": "NVIDIA GeForce RTX 3090" },
          "updatedAt": "2023-05-14T12:34:49.268Z",
          "mSpeed": 386
        },
        {
          "id": 6091453,
          "gpus": { "count": 4, "model": "NVIDIA GeForce RTX 3090" },
          "updatedAt": "2023-05-14T12:34:31.060Z",
          "mSpeed": 751
        }
      ],
      "secondUser": [
        {
          "id": 6208888,
          "gpus": { "count": 3, "model": "NVIDIA GeForce RTX 3080 Ti" },
          "updatedAt": "2023-05-14T12:34:36.482Z",
          "mSpeed": 542
        },
        {
          "id": 6158802,
          "gpus": { "count": 3, "model": "NVIDIA GeForce RTX 3090" },
          "updatedAt": "2023-05-14T12:35:34.211Z",
          "mSpeed": 558
        }
       ]
     }
  }
}

原始React代码 #

App组件

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch("http://localhost:8000/data")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  }, []);

  return (
    <div className="App">
      <Cards data={data} />
    </div>
  );
}

Cards组件

const Cards = ({ data }) => {
  let firstUser = Object.entries(data || data?.activeUsers?.firstUser);

  return (
    <div>
      {firstUser.map((el) => (
        <h1 key={el.id}>{el.updateAt}</h1>
      ))}
    </div>
  );
};

export default Cards;

错误分析 #

1. 数据层级错误：fetch返回的JSON外层包含data字段，传给Cards组件的data对象需要先取data.data才能拿到实际业务数据，直接访问data.activeUsers会返回undefined。
2. 不必要的Object方法使用：firstUser本身是数组类型，不需要用Object.entries()转换——该方法用于处理对象的键值对，用在数组上会得到索引和元素的键值对数组，无法直接获取对象属性。
3. 属性拼写错误：渲染时使用了el.updateAt，但JSON里的字段是updatedAt，拼写错误导致无内容显示。
4. 未处理空数据状态：组件初始渲染时data是空对象，直接访问嵌套属性会触发报错，需要添加可选链操作符?.和空值兜底。

修复后的代码 #

修改后的Cards组件 #

const Cards = ({ data }) => {
  // 拿到嵌套的firstUser数组，用空数组兜底避免map报错
  const firstUser = data?.data?.activeUsers?.firstUser || [];

  return (
    <div>
      {firstUser.map((user) => (
        <h1 key={user.id}>{user.updatedAt}</h1>
      ))}
    </div>
  );
};

export default Cards;

可选优化：App组件初始状态 #

将App组件的初始state设为null，配合条件渲染避免不必要的空值处理：

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("http://localhost:8000/data")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  }, []);

  // 数据未加载时显示加载提示
  if (!data) return <div>Loading...</div>;

  return (
    <div className="App">
      <Cards data={data} />
    </div>
  );
}

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