React中使用Fetch API获取JSON数组嵌套对象属性的问题求解

问题核心原因 #

你当前存储的items数组每一项的第一层结构仅包含itemId、lastUpdate、item三个字段，目标属性name和description存放在第一层的item字段下，直接写item.name访问的是不存在的第一层属性，所以无法正常取值。

分步修改方案 #

• 步骤1：修正属性访问路径
  两种写法可选：

  1. 直接按层级访问：item.item.name、item.item.description
  2. 遍历的时候解构取出内层item对象：items.map(({item}) => (<h1>{item.name}</h1>))

• 步骤2：添加可选链空值防护
  接口返回数据加载完成前，或者某条数据缺少item字段时，直接层级访问会抛出报错，建议使用ES6可选链语法做兼容：item?.item?.name、item?.item?.description

• 步骤3：添加列表渲染唯一key属性
  React要求列表遍历渲染的根元素需要添加唯一key，避免控制台报错和渲染异常，这里可以用接口返回的itemId作为key值。

• 步骤4：完整替换后的代码如下

import { useEffect, useState } from 'react';

function Shop() {
  const [items, setItems] = useState([]);

  const fetchitems = async () => {
    const res = await fetch("https://fortnite-api.theapinetwork.com/upcoming/get");
    const itemsdata = await res.json();
    setItems(itemsdata.data);
  };

  useEffect(() => {
    fetchitems();
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.itemId}>
          <h1>{item?.item?.name}</h1>
          <p>{item?.item?.description || '暂无描述'}</p>
          {/* 其他嵌套属性按照相同层级规则读取即可，比如图标地址：item?.item?.images?.icon */}
        </div>
      ))}
    </div>
  );
}

export default Shop;

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