如何在 React Js 中集成 array.map

Question

這是我的 Jason 數據和代碼，我使用 map() 來填充我的數據但出現一些錯誤，下面是我的代碼

var data = [
  {
    categorytitle: "Shoes",
    category: [
      {
        Category1: "Boots"
      },
      {
        Category2: "Sneakers"
      },
      {
        Category3: "Flats"
      },
      {
        Category4: "Booties"
      },
      {
        Category5: "Mules"
      },
      {
        Category6: "Heels/Pumps"
      },
      {
        Category7: "Clogs"
      },
      {
        Category8: "Slippers"
      },
      {
        Category9: "Sandals"
      },
      {
        Category10: "Sale"
      },
      {
        Category11: "Shop All"
      }
    ]
  }
];

也請在下面找到填充代碼...

{data.map((el, e) => (
                    <div {...el} key={e}>
                      <h3>{el.categorytitle}</h3>
                      <ul>
                        <li>{el.category[e]}</li>
                      </ul>
                    </div>
                  ))}

請指導我如何在列表中顯示Category1 ....？

Answer 1

您可以執行以下操作

   {data.map((ele, index) => (
                <div key={"Key-"+index}>
                  <h3>{ele.categorytitle}</h3>
                  <ul>
                    {Array.isArray(ele.category) && ele.category.map((d, i) => (<li key={"Key-"+i}>{d[`Category${i+1}`]}
                    </li>))}
                  </ul>
                </div>
              ))}

Answer 2

嘗試這樣的事情：您需要遍歷category數組

data[0].category.map((el, i) => {
    console.log(el['Category' + i++])
    console.log(i)
    return el['Category' + i++];
})

Answer 3

 const data = [{ categorytitle: "Shoes", category: [{ Category1: "Boots" }, { Category2: "Sneakers" }, { Category3: "Flats" }, { Category4: "Booties" }, { Category5: "Mules" }, { Category6: "Heels/Pumps" }, { Category7: "Clogs" }, { Category8: "Slippers" }, { Category9: "Sandals" }, { Category10: "Sale" }, { Category11: "Shop All" } ] }]; const category = data.forEach(({ category }) => { Object.values(category).map((value, index) => { console.log(value[`Category${index +1 }`]); }) });

對於 React JSX它應該是這樣的：

{data.forEach(({ category }) => {
      Object.values(category).map((value, index) => {
        <span> {value[`Category${index + 1}`]} </span>;
      });
    })}