数组 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)

---

检查传统函数与箭头函数。