javascript - 遇到两个 child 用同一个key报错

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 作为 key ，纬度可以相同，因此尝试使用 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 ，例如:

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