带有 React 组件的 Javascript .map(...)答案

【问题标题】：Javascript .map(...) with React Component带有 React 组件的 Javascript .map(...)
【发布时间】：2021-01-20 19:47:53
【问题描述】：

在我的 React 代码中，我有类似的东西

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

在哪里

const renderDate = (date: string) => {
    return (
        <div>
            <span className="date">
                {date}
            </span>
        </div>
    )
}

当我查看 UI 时，我发现页面上的所有元素的日期都与 elements 数组中的最后一个日期相同。但是我想保持每个元素的日期而不是被覆盖。任何人都可以提供建议吗？我应该把.map(...) 变成.forEach(...) 吗？

【问题讨论】：

@PatrickRoberts：已更新。
你错过了key reactjs.org/docs/lists-and-keys.html
添加 key 无疑是最佳实践，并且可以帮助提高性能 - 但不会导致此错误。您能否在类似代码沙盒或 codepen（等）的网站上制作此问题的演示，并在您的问题中链接到它，以便我们查看您的实际代码和数据？

标签： javascript reactjs deep-copy

【解决方案1】：

如果没有更多细节，我不能肯定地说，但它可能只是语法。我认为您在最后一行有一个额外的右括号 (})。试试这个：

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

如前所述，您还需要添加一个key 属性。如果 elements 数组不会被更新，导致组件重新渲染，那么像上面这样的简单索引 key 将起作用。或者，如果日期都是唯一的，您可以使用 <div key={element.date}>，或每个项目唯一的其他值。

【讨论】：