React如何访问JSON响应中的深层嵌套数据？遇TypeError问题

核心原因 #

你遇到的问题本质是React渲染时机和异步数据加载不同步，或者嵌套属性访问时中间节点未定义：

• 组件首次渲染时，API请求还未完成，此时你的json变量可能是初始空值/undefined，直接访问深层嵌套属性会触发报错。
• 虽然console.log能显示数据，但它会延迟解析引用类型，你看到的是请求完成后的数据，而非渲染时的真实状态。

解决方案 #

1. 使用可选链操作符（?.）安全访问嵌套属性 #

在访问深层属性时，用?.替代.，一旦中间某个节点为undefined，表达式会直接返回undefined而不报错：

const restaurantId = json.data?.cards?.[0]?.groupedCard?.cardGroupMap?.RESTAURANT?.cards?.[0]?.card?.card?.info?.id;

2. 增加条件渲染，确保数据存在后再访问 #

在渲染前先判断关键节点是否存在，避免提前访问：

{json.data && 
 json.data.cards.length > 0 && 
 json.data.cards[0].groupedCard?.cardGroupMap?.RESTAURANT && 
 json.data.cards[0].groupedCard.cardGroupMap.RESTAURANT.cards.length > 0 && (
  <div>餐厅ID：{json.data.cards[0].groupedCard.cardGroupMap.RESTAURANT.cards[0].card.card.info.id}</div>
)}

3. 给状态设置合理的初始值 #

如果用useState管理数据，初始化时给与API结构匹配的空值，避免首次渲染时访问不存在的属性：

import { useState, useEffect } from 'react';

function App() {
  // 初始状态匹配API返回的结构，避免undefined
  const [apiData, setApiData] = useState({
    data: {
      cards: []
    }
  });

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("LINK_TO_API");
      const json = await res.json();
      setApiData(json);
    };
    fetchData();
  }, []);

  // 使用可选链访问
  const restaurantId = apiData.data?.cards?.[0]?.groupedCard?.cardGroupMap?.RESTAURANT?.cards?.[0]?.card?.card?.info?.id;

  return (
    <div>{restaurantId ? `餐厅ID：${restaurantId}` : '加载中...'}</div>
  );
}

4. 确认API返回的真实结构 #

有时候你看到的console.log数据是更新后的，可通过以下方式打印初始状态的完整数据：

const json = await res.json();
// 打印序列化后的副本，查看真实初始结构
console.log(JSON.parse(JSON.stringify(json)));
setApiData(json);

确保你的访问路径和API返回的结构完全一致，比如是否存在groupedCard、cardGroupMap.RESTAURANT等节点。

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