遇到两个孩子用同一个key Error

Question

我正在尝试将一组对象（城市名称）映射到 ANTD 的选择组件中。

<Form.Item {...formItemLayout} label="City" hasFeedback >
   {getFieldDecorator('city', {
      rules: [{ required: true, message: 'Please select your city!',}],
      initialValue: this.state.city})(
    <Select
     showSearch
     placeholder="Please select a city"
     optionFilterProp="children"
     filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
    >
  {cities.map(r =>
   <Option key={`${r.lat}`} value={`${r.name}`}>{`${r.name}`}</Option>
   )}
    </Select>
 )}
</Form.Item>

这就是数据（城市）的样子 我不知道应该如何使用Options 中的数据。请帮忙。

Answer 1

您使用 latitude 作为键，纬度可以相同，因此请尝试使用 latitude 和 name 的组合，这样就可以了独一无二。

 <Form.Item {...formItemLayout} label="City" hasFeedback >
   {getFieldDecorator('city', {
      rules: [{ required: true, message: 'Please select your city!',}],
      initialValue: this.state.city})(
    <Select
     showSearch
     placeholder="Please select a city"
     optionFilterProp="children"
     filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
    >
  {cities.map((r,index) =>
   <Option key={`${r.lat}${r.lng}${r.name}${index}`} value={`${r.name}`}>{`${r.name}`}</Option>
   )}
    </Select>
 )}
</Form.Item>

编辑：可能存在两个具有相同纬度和名称的地方（在一个大而奇怪的列表中，但可能发生 :-/ ）。您应该尝试创建最独特的密钥，例如：

key={`${r.lat}${r.lng}${r.name}`}