Question

我正在构建一个React APP来获取电影并允许对它们进行评论，同时添加投票/评分。用户可以对电影进行评论和投票。我要做的是制作一个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

Answer 1

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

在您的<option />内只需添加一个key={rating}道具

如何解决React“警告：列表中的每个孩子都应该有一个唯一的”关键“道具”

1 个答案: