React嵌套map()渲染报错求助：多层对象数组渲染值异常

问题情况 #

我有一个嵌套结构的数据对象，外层包含adSets数组，每个数组元素又包含ads数组。用React的map()嵌套渲染HTML时出现报错，通过console.log打印发现，有时能获取到有效值，有时却显示undefined，渲染过程存在异常。

数据结构 #

{
    "id": "foo",
    "adSets": [
        {
            "id": "adset1",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad1",
                    "name": "ad1"
                }
            ]
        },
        {
            "id": "adset2",
            "name": "adset1",
            "ads": [
                {
                    "id": "ad2",
                    "name": "ad2"
                },
                {
                    "id": "ad3",
                    "name": "ad3"
                }
            ]
        }
    ]
}

渲染代码 #

{campaignData.adSets.map((adSet) => {
               console.log(adSet.ad)
               return (
                 <li key={adSet.id}>
                   <span className="">{adSet.name}</span>
                   <ul>
                   {adSet.ads.map((ad) => {
                     return (
                       <li key={ad.id}>
                        <span className="">{ad.name}</span>
                       </li>
                     );
                   })}
                  </ul>
                 </li>
               );
})}

问题分析 #

你代码里有个笔误：console.log(adSet.ad)应该是adSet.ads，但这不是报错的核心原因。真正问题出在数据初始化时机和完整性：

• 如果campaignData是通过接口请求获取的，组件初始渲染时它可能是undefined，直接调用campaignData.adSets.map会因undefined没有map方法报错；
• 部分adSet对象可能缺失ads属性，导致内层adSet.ads.map同样报错。

解决方案 #

1. 用可选链做空值校验 #

直接在渲染时通过?.操作符判断属性是否存在，避免报错：

{campaignData?.adSets?.map((adSet) => {
  return (
    <li key={adSet.id}>
      <span>{adSet.name}</span>
      <ul>
        {/* 给ads也加可选链判断 */}
        {adSet?.ads?.map((ad) => (
          <li key={ad.id}>
            <span>{ad.name}</span>
          </li>
        ))}
      </ul>
    </li>
  );
})}

2. 设置初始状态 #

在组件的state里给campaignData设置默认值，保证初始渲染时adSets是一个空数组：

const [campaignData, setCampaignData] = useState({ adSets: [] });

3. 预处理数据保证完整性 #

如果接口返回的数据可能存在ads缺失的情况，提前补全空数组：

// 预处理数据，确保每个adSet都有ads数组
const processedData = campaignData ? {
  ...campaignData,
  adSets: campaignData.adSets.map(adSet => ({
    ...adSet,
    ads: adSet.ads || []
  }))
} : { adSets: [] };

// 用处理后的数据渲染
{processedData.adSets.map((adSet) => {
  // 渲染逻辑...
})}

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