目前的需求是需要用到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: "交通设施服务;停车场;停车场相关"
emmmm好了,自己解决了,问问题10分钟,解决只要1分钟。哭了?
解决方案:
optionLabelProp="label"
自定义一个label属性,用来回显,这样的话,value是唯一的了。