将数组中的位置分配为反应键？

Posted 2023-02-22

【中文标题】将数组中的位置分配为反应键？

【英文标题】：Assign position in array as react key?

【发布时间】：2017-10-03 08:02:20

【问题描述】：

我有一个由不同字符串组成的数组。我想通过它映射并在 React 中显示它。当两个字符串相同时，React 不喜欢它。

我的问题是：有没有办法让我通过数组进行映射并将数组中元素的位置 (0,1,2,3..) 分配为键？我不确定我将如何访问它？可以吗？

let renderthis = this.props.myreducer.somearray.map((element) =>
  <span key=what can I put here?>element </span>
);

顺便说一句，我试过了，但没有用：

let renderthis = this.props.myreducer.somearray.map((element, i) =>
  <span key=i>element </span>
);

警告：flattenChildren(...): 遇到两个相同的孩子 键，.1:$afaf。子键必须是唯一的；当两个孩子共用一个 键，只会使用第一个孩子。

【问题讨论】：

map 回调的第二个参数是一个索引。

谢谢。看看我的编辑，如果这是你的意思。我试过了，但我收到警告说元素有重复的键。但也许我在那里做错了？

然后是其他一些元素有重复的键。

我不这么认为。正是在我向该数组添加重复元素的那一刻，我得到了这个错误。

不确定您将.1:$afaf 带到了哪里。 i 是一个数字。

【参考方案1】：

Array.prototype.map 回调接受第二个参数作为项目索引。

这意味着，如果您只需要每个元素集合的唯一键，并且您没有任何其他自然唯一的值，您可以简单地这样做：

let renderthis = this.props.myreducer.somearray.map((element, i) =>
  <span key=i>element </span>
);