数组映射功能不起作用(在React中不渲染元素) [英] Array map function is not working (not rendering elements in React)

问题描述

如何在整个数组上进行映射以显示该数组中的所有元素?

How can I map over array to display all elements from that array?

当我尝试呈现单个条目时，它可以工作，但是当我映射数组时，它什么也没做.

When I try to render single entry it works but when I map an array it doesn't do anything.

以下作品:

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

以下操作无效:

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

我在同一数组有效上的同一渲染中有另一个 map :

I have another map in the same render over the same array that works:

<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>

推荐答案

Array#map 方法创建一个新数组，该数组填充了以下结果(即返回值)在调用数组中的每个元素上调用提供的函数(即回调).

The Array#map method creates a new array populated with the results (i.e. return value) of calling a provided function (i.e. callback) on every element in the calling array.

您可以通过以下不同方式使用Array#map :

Here are different ways you can use Array#map:

1. 名为回调的命名函数:

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

1. 匿名函数作为回调:

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

1. 一个箭头函数(使用 {} )作为回调:

1. An arrow function (using {}) as callback:

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

1. 一个箭头函数作为回调:

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

1. 箭头函数(没有 {} 或())作为回调:

1. An arrow function (without {} or ()) as callback:

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

---

检查传统功能与箭头功能.

这篇关于数组映射功能不起作用(在React中不渲染元素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！