反应 forEach 没有被渲染答案

【问题标题】：React forEach not being rendered反应 forEach 没有被渲染
【发布时间】：2021-04-05 16:01:42
【问题描述】：

如果我在 <h1> 标签之前 console.log item.name 我确实会在控制台中看到所有项目名称，但是，由于某种原因，它们没有打印在 <h1> 或任何其他标签中。

import React from 'react'

function Product(props) {
  const newArr = props.list.map((product) => {
      return {name: product.name, price: product.price, description: product.description}
  })
  return(
      <div>
        {newArr.forEach((item) => {
            <h1>{item.name}</h1>
        })}
      </div>
  )  
}

export default Product

请帮忙

【问题讨论】：

forEach 不返回任何内容；曾经。使用Array#map。

标签： javascript reactjs foreach

【解决方案1】：

改用map()，并为返回元素指定一个唯一键属性。在这种情况下，我假设它是 name，我建议使用唯一的 id 或类似的东西。

<div>
    {newArr.map((item) => 
        <h1 key={item.name}>{item.name}</h1>
     })
</div>

【讨论】：

【解决方案2】：

我建议您使用map()。这是在 React JS 中呈现数据的最佳方式 something like that

来源：https://reactjs.org/docs/lists-and-keys.html

【讨论】：