數組 map function 不起作用（不在 React 中渲染元素）

Question

如何通過陣列map顯示該陣列中的所有元素？

當我嘗試渲染單個條目時它可以工作，但是當我 map 一個數組時它什么也不做。

下面的作品：

<h1>{thisSeries[0].productColor}</h1>;

以下不起作用：

{thisSeries.map((el) => {
  <h1>PRODUCT: {el.productColor}</h1>;
})}

我有另一個map在同一個渲染中，在同一個陣列上工作：

<div>
  {thisSeries.length >= 0 &&
    thisSeries.map((el) => (
      <Link
        key={el._id}
        className="link"
        to={`/pr/add/ph/m/p/variant/${el._id}`}
      >
        <button
          style={{ width: "80%" }}
          onClick="window.location.reload();"
        >
          {el.title}
        </button>
      </Link>
    ))}
</div>

Answer 1

Array#map方法創建一個新數組，其中填充了在調用數組中的每個元素上調用提供的 function（即回調）的結果（即返回值）。

以下是您可以使用Array#map的不同方式：

1. 一個名為 function 作為回調：

const data = [1,2,3]
data.map(function foo(d) {
  return d*d
})

2. 匿名 function 作為回調：

const data = [1,2,3]
data.map(function (d) {
  return d*d
})

3. 箭頭 function （使用{} ）作為回調：

const data = [1,2,3]
data.map((d) => {
  return d*d
})

4. 箭頭 function 作為回調：

const data = [1,2,3]
data.map((d) => (d*d))

5. 箭頭 function （沒有{}或() ）作為回調：

const data = [1,2,3]
data.map((d) => d*d)

---

檢查傳統函數與箭頭函數。