带有React组件的Javascript.map（…）

在我的React代码中，我有

{elements.map((element) => {
   return (
      <div>
           {renderDate(element.date)}
      </div>
   )
}})}

{elements.map（（element）=>{
返回(
{renderDate（element.date）}
)
}})}

在哪里

const renderDate=（日期：字符串）=>{
返回(
{date}
)
}

---

当我查看UI时，我看到页面上的所有元素都与

元素

数组中的最后一个日期相同。但是，我想维护每个元素的日期，而不是它被覆盖。有人能提出建议吗？我是否应该将

.map（…）

转换为

.forEach（…）

？

而不提供更多详细信息，我不能确定，但可能只是语法问题。我想你在最后一行有一个额外的右括号（

}

）。试试这个：

{elements.map((element, i)=> (
  <div key={i} >
    {renderDate(element.date)}
  </div>
))}

{elements.map（（element，i）=>(
{renderDate（element.date）}
))}

---

如前所述，您还需要添加一个

键

道具。如果不更新

元素

数组，导致组件重新渲染，则可以使用上面类似的简单索引

键

。或者，如果日期都是唯一的，您可以使用

，或每个项目唯一的另一个值。

@PatrickRoberts:Updated。您缺少

键

添加

键

当然是最佳做法，可以提高性能-但不会导致此错误。您是否可以在codesandbox或codepen（等）等网站上演示此问题，并在您的问题中链接到它，以便我们可以查看您的实际代码和数据？

{elements.map((element, i)=> (
  <div key={i} >
    {renderDate(element.date)}
  </div>
))}