遇到两个孩子具有相同的键错误

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

您正在使用纬度作为密钥，纬度可以相同，因此请尝试使用纬度和名称的组合，

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

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

{{1}}