Antd AutoComplete value显示[object object]

Question

AutoComplete 中dataSource设置为option，

 <AutoComplete
    value={this.state.value}
    
    onSelect={this.hanldeSelect}
    dataSource ={this.renderOption()}


/>

hanldeSelect = (s) => {
this.setState({
  value:`${s.value}${s.name}`  // 设置value值为选中option的值
})
}

renderOption = () => {
    return this.state.array.map(a=>{
    <Option key={a.key}>
        <span>a.value</span>
        <span>a.name</span>
    </Option>
    })

}

问题如下：

设置Option的key为a.key时，选中其中一条，显示[object object]
设置Option的key为a.name时，直接粘贴a.name字符串，显示[object object]
设置Option的key为a.value时，直接粘贴a.value字符串，显示[object object]
设置Option的key为a.value+a.name 时，选中其中一条，显示[object object]
设置Option的key为a.key+ 其他字段时，选中其中一条，显示[object object]

每次render的时候，AutoComplete 的value属性是正确的

怎么使这个值是this.state.value？

Answer 1

hanldeSelect 接收到的value是Option的key属性，需要手动对获取到的值进行处理，并重新setState

hanldeSelect = (s) => {
    const finded = this.state.array.find(a=>a.key===s)
        
    finded && this.setState({
      value:`${finded.value}${finded.name}` 
    })
}

如果finded === undefined,需要额外处理

Answer 2

需要给option设置text属性，optionLabelProp默认接收的是children属性，可以select函数看看 value，和option的返回值