数组映射函数不工作（不在 React 中渲染元素）

Question

如何 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 方法创建一个新数组，其中填充了调用提供的函数（即 callback) 在调用数组中的每个元素上。

您可以通过以下方式使用 Array#map：

作为回调的命名函数：

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

作为回调的匿名函数：

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

箭头函数（使用{}）作为回调：

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

作为回调的箭头函数：

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

一个箭头函数（没有 {} 或 ()）作为回调：

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

检查Traditional functions vs Arrow functions。

数组映射函数不工作（不在 React 中渲染元素）

Array map function is not working (not rendering elements in React)

javascript

arrays

reactjs

arrow-functions