Map 在 React 中的數組上

Question

我正在構建一個顯示視頻游戲和有關它們的各種信息的應用程序，從 API 中提取數據。我正在嘗試顯示可玩該游戲的所有平台，PlayStation、Xbox 等。JSON 有一系列平台對於每個游戲，每個游戲都包含一個平台 object 和一個名稱（我試圖顯示）。 地圖真的讓我感到困惑我真的很感謝有人對此的幫助。 我將包括 JSON 的一個片段。

  "count": 1326,
  "next": "https://api.rawg.io/api/games?key=8d1a421af80b4f9b8650de12d9943010&page=2&search=destiny",
  "previous": null,
  "results": [
    {
      "slug": "destiny",
      "name": "Destiny",
      "playtime": 24,
      "platforms": [
        {
          "platform": {
            "id": 1,
            "name": "Xbox One",
            "slug": "xbox-one"
          }
        },
        {
          "platform": {
            "id": 18,
            "name": "PlayStation 4",
            "slug": "playstation4"
          }
        },
        {
          "platform": {
            "id": 14,
            "name": "Xbox 360",
            "slug": "xbox360"
          }
        },
        {
          "platform": {
            "id": 16,
            "name": "PlayStation 3",
            "slug": "playstation3"
          }
        }
      ],

const GameCard = ({
  game: {
    name,
    background_image,
    metacritic,
    released,
    platforms,
    platform,
    esrb_rating,
  },
}) => {
  return (
    <div className="bg-gray-600/30 m-5 p-0 rounded-xl shadow-xl shadow-gray-700 border-solid border-2 border-gray-700 max-w-[640px] hover:scale-105 ease-in duration-300">
      <img
        className="rounded-t-xl h-[360px] w-[640px] border-b-2 border-gray-600"
        alt={name}
        src={
          background_image
            ? background_image
            : "https://via.placeholder.com/640x360"
        }
      />
      <h1 className="text-center text-4xl text-gray-900 tracking-wide font-bold mt-2 font-mono">
        {name}
      </h1>
      <div className="text-gray-800 text-center font-mono py-2">
        {platforms ? platforms.map(() => <span></span>) : null}

Answer 1

根據W3Schools ：

map() 通過為每個數組元素調用 function 創建一個新數組。

map() 為數組中的每個元素調用一次 function。

map() 不會對空元素執行 function。

map() 不會改變原始數組。

這會從一組平台對象創建一組名稱，例如您顯示的 json 片段中的 results.platforms。

platforms.map(platform => <span>{platform.platform.name}</span>)

Answer 2

如果你在將那部分帶到代碼中稱為平台的變量之后在平台上 map，那么你可以在它上面 map，如下所示：

 <div className="text-gray-800 text-center font-mono py-2"> {platforms? platforms.map((item) => <span key={item.platform.id}> {item.platform.name} </span>): null } </div>

不要忘記將鍵插入 span 標簽內。 它將作為每個 span 標簽的唯一標識符。

參考：列表和鍵