如何修复反应“警告：列表中的每个孩子都应该有一个唯一的“关键”道具”[重复]答案

【问题标题】：How to fix React "Warning: Each child in a list should have a unique "key" prop" [duplicate]如何修复反应“警告：列表中的每个孩子都应该有一个唯一的“关键”道具”[重复]
【发布时间】：2020-03-23 06:34:56
【问题描述】：

我正在构建一个 React 应用程序来获取电影并允许评论它们添加投票/评分。用户可以对电影进行评论和投票。我所做的是制作一个option 标签并使用map 来创建用户可以选择的评分值。

这是部分代码：

<FormGroup>
  <Label for="rate">Rate(Out of 5)</Label>
    <Input
     type="select"
     name="rate"
     value={rate}
     onChange={this.onChange}
     style={{width: 200}}>
     {ratings.map(rating => (
     // eslint-disable-next-line react/jsx-key
     <option>{rating}</option>
              ))}
    </Input>
   </FormGroup>

在选项标签行我收到以下错误：

Warning: Each child in a list should have a unique "key" prop.

我不知道如何消除此警告，并且想提出一些建议以及为什么我会收到此警告，以便将来避免它。

我的完整代码在这里： https://pastebin.com/qvReLYPy

【问题讨论】：

删除了我的答案，因为即使它对您的情况最安全，但在大多数用例中不推荐使用，因为数组可能会更改。这是反应docs on the subject

标签： javascript reactjs

【解决方案1】：

这是因为当你遍历一个数组并返回一个 react 组件时，你需要给它一个 key，以便 react 知道何时更新它。

在您的 <option /> 中只需添加一个 key={rating} 属性

【讨论】：