Javascript 迭代JSON数组，访问输出的名称和设置类名的Id

我正在通过获取fortnite即将发布的项目来练习api调用

我试图访问json数组中的itemId和项目名称，大致如下所示：

data: Array(67)
0: {itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c", lastUpdate: 1617619592, item: {…}}
1: {itemId: "723a761f-fa59-4cfc-92e7-9309a87c5a9e", lastUpdate: 1617585135, item: {…}
}

return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${x.itemId}`}>
          <h3 key={x.itemId}>
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );

然后：

0:
item: {name: "Ruby Shadows", description: "Sometimes you gotta go dark.", type: "outfit", rarity: "epic", series: "shadow", …}
itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c"
lastUpdate: 1617619592
__proto__: Object

我使用.map来实现这一点，但在某些情况下，

中的对象文本不会返回所需的结果。（当前返回未定义）

整个下午我都在为这件事绞尽脑汁。仍然是新的反应

我的代码：

import './App.css';
import { Link } from 'react-router-dom';

function Shop() {
    useEffect(() => {
        fetchItems();
    },[]);
    
    const [items, setItems] = useState([]);

    let dataArray = [];
    const fetchItems = async () => {
      const data = await fetch('https://fortnite-api.theapinetwork.com/upcoming/get');
      
      const items = await data.json();
      dataArray = items.data;
      setItems(dataArray.map( x => {return x}));
      console.log(items);
    }
   

  return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${items.itemId}`}>
          <h3 key={items.itemId}>
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );
}

export default Shop;

import'/App.css'；
从'react router dom'导入{Link}；
功能商店（）{
useffect（（）=>{
fetchItems（）；
},[]);
const[items，setItems]=useState（[]）；
让dataArray=[]；
const fetchItems=async（）=>{
常量数据=等待获取（'https://fortnite-api.theapinetwork.com/upcoming/get');
const items=wait data.json（）；
dataArray=items.data；
setItems（dataArray.map（x=>{returnx}））；
控制台日志（项目）；
}
返回(
即将推出的Fortnite项目
{items.map（x=>
{x.item.name}
)}       
);
}
出口默认商店；

谢谢你的帮助，谢谢

编辑：

这是为另一个p处理组件的另一个组件；应该输出项目详细信息的年龄：（对不起）

import'/App.css'；
从'react router dom'导入{Link}；
函数ItemDetail（{match}）{
/**这使它生效*/
useffect（（）=>{
fetchItem（）；
控制台日志（匹配）；
},[]);
const[item，setItem]=useState（[]）；
const fetchItem=async（）=>{
const fetchItem=等待获取(`https://fortnite-api.theapinetwork.com/item/get?id={{itemid}}`）；
const item=wait fetchItem.json（）；
}
返回(
项目
);
}
导出默认项目详细信息```

问题就在这里：

return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${items.itemId}`}> // <-------  Here 
          <h3 key={items.itemId}> //<-------- Here
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );

---

setItems（dataArray.map（x=>{return x}））这与
setItems（dataArray）
相同。您是否尝试在此处执行一些不同的操作？是的，我的操作类似于：
setItems（dataArray.map（x=>x.item）；
返回的内容
await data.json（）
？还应避免两次声明
常量项
，仅用于readability@FabioLopez我没有注意到这一点。但这不会产生不想要的结果，是吗？@T888是的，别担心，默认情况下javascript会选择最接近的范围变量。我的建议是，以后不要混合使用这两个变量。事实上，这很有效！！！哦老兄，太谢谢你了！之前输入了一个错误。顺便说一句，我刚刚注意到密钥设置不正确，我得到了一个
索引。js:1警告：列表中的每个孩子都应该有一个唯一的“key”道具。
error没错，密钥应该在
链接
元素上定义，而不是在
h3
上定义。再次感谢你！成功了！
return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${x.itemId}`}>
          <h3 key={x.itemId}>
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );