遍历 JSON 数组，访问输出名称和 Id 以设置 className

如何解决遍历 JSON 数组，访问输出名称和 Id 以设置 className

我正在通过获取 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: {…}
}

然后：

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 来执行此操作，但在某些情况下，<h3 key={items.itemId}> 中的对象字面量不会返回所需的结果。（目前返回 undefined）

我整个下午都在为这件事头疼。仍然是新的反应。

我的代码：

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';
import { Link } from 'react-router-dom';


function ItemDetail({ match }) {
  /**this puts it into effect */
    useEffect(() => {
        fetchItem();
        console.log(match);
    },[]);
    
    const [item,setItem] = useState([]);

    const fetchItem = async () => {
        const fetchItem = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id={{itemid}}`);
        const item = await fetchItem.json();
    }

  return (
    <div id="App">
      <h1>Item</h1>
    </div>
  );
}

export default ItemDetail;```

解决方法

问题就在这里：

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>
  );

您需要从每个元素中获取 itemId，现在您正在尝试从实际数组中获取值，该数组不包含任何字段，因此为您提供 undefined。

代码应该是这样的：

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>
  );