antd3.20.0版本的AutoComplete组件当value相同的时候报错react same key

目前的需求是需要用到antd的AutoComplete组件,来做一个输入的时候调高德地图的api检索address数据,但是问题是address数据会重复,name跟value都会重复,然后AutoComplete组件就会报错,我这边,key是唯一的,使用的是id,但是很奇怪就是一直报same key的错。

代码:

                        <AutoComplete
                          style={{ width: 150 }}
                          placeholder=""
                          value={rule.address || ''}
                          onSearch={this.queryMapLocations}
                          onSelect={this.selectMapLocation}
                          onChange={e => actions.handleChange(e, rule.key, 'address')}
                          optionLabelProp="value"
                          allowClear
                        >
                          {
                            autoCompleteOptions
                          }
                        </AutoComplete>
                        
                        
                        
                        
queryMapLocations = async (queryString) => {
    const result = await this.mapContainer.search(queryString);
    const options = result && result.pois
      ? result.pois.map(item => (
        <Option key={item.id} value={item.address}>{item.address}</Option>
      ))
      : [DefaultOption];
    // const oriResult = result && result.pois
    //   ? result.pois.map(item => ({
    //     value: item.address,
    //     ...item
    //   }))
    //   : [];
    this.setState({ autoCompleteOptions: options }, () => {});
  }

报错:

Warning: Encountered two children with the same key, `.$G111(京加路)附近`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

报错的俩条数据:

1.  :

1.  address: "G111(京加路)附近"
2.  distance: NaN
3.  id: "B0G3AUDI0R"
4.  location: c {Q: 40.357815, R: 116.65734700000002, lng: 116.657347, lat: 40.357815}
5.  name: "G111(京加路)-路侧停车位"
6.  shopinfo: "2"
7.  tel: ""
8.  type: "交通设施服务;停车场;停车场相关"
9.  __proto__: Object

3.  2:

1.  address: "G111(京加路)附近"
2.  distance: NaN
3.  id: "B0G22XZLRU"
4.  location: c {Q: 40.388806, R: 116.68948899999998, lng: 116.689489, lat: 40.388806}
5.  name: "G111(京加路)-路侧停车位"
6.  shopinfo: "2"
7.  tel: ""
8.  type: "交通设施服务;停车场;停车场相关"
阅读 4.6k
1 个回答

emmmm好了,自己解决了,问问题10分钟,解决只要1分钟。哭了?
解决方案:
optionLabelProp="label"自定义一个label属性,用来回显,这样的话,value是唯一的了。

<Option key={item.id} value={item.id} label={item.address}>{item.address}</Option>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题