React中如何访问API返回的嵌套数组数据？

核心问题定位 #

你已经精准指出了关键错误：API返回的嵌套数组字段名为qucik_details（拼写为q-u-c-i-k），但代码里写成了quick_details（拼写为q-u-i-c-k），字段名不匹配导致无法读取嵌套数组数据。

修正后的代码实现 #

以下是修复后的完整代码片段，同时补全了缺失的标签闭合、正确渲染type_img字段：

return listData.map((item, index) => {
  return (
    <div className="itemm" key={index}>
      <div>
        {/* 注意：API返回数据里无display_img字段，若实际接口存在可保留，否则需替换为正确图片字段 */}
        <img src={item.display_img} className="Image" alt={item.quicktype} />
        <h1>{item.quicktype}</h1>
        <div>
          <div>
            {/* 修正字段拼写：qucik_details 匹配API返回的字段名 */}
            {item?.qucik_details?.map((c, i) => (
              <div key={i}>
                <h3>{c.type_name}</h3>
                {/* 渲染嵌套数组中的图片字段 */}
                <img src={c.type_img} alt={c.type_name} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
});

额外注意事项 #

• 给qucik_details添加可选链?.，避免该字段为undefined或null时触发运行时错误。
• 原代码存在未闭合的JSX标签，修复后确保所有标签成对闭合，避免渲染异常。
• API返回数据中没有display_img字段，若实际接口无该字段，需替换为对应图片字段或注释掉该部分代码。

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