antd 的 Select 在使用 onSearch 获取远端数据时，只能显示 value 值

Question

const { searchData, searching, searchValue } = this.state;
<Select
  mode="combobox"
  value={searchValue}
  placeholder="请输入搜索条件"
  notFoundContent={searching ? <Spin size="small" /> : null}
  filterOption={false}
  onChange={this.onSearchValueChangeHandler}
  onSearch={this.onSearchHandler}
>
    {searchData.map(d => <Option key={d.value}>{d.label}</Option>)}
</Select>

onSearchHandler(value) {
    this.setState({ searchData: [], searching: true });
    setTimeout(() => {
        const results = [
          { value: 'aaa', label: '啊啊啊' },
          { value: 'bbb', label: '不不不' },
          { value: 'ccc', label: '擦擦擦' },
        ];
        const data = results.map(item => ({ value: item.value, label: item.label }));
        this.setState({ searchData: data, searching: false });
    }, 500);
}

onSearchValueChangeHandler(value) {
    this.setState({
      searchValue: value,
      searchData: [],
      searching: false,
    });
}

上面是利用 Select 的 onSearch 接口进行远程数据访问的片段。现在可能发现一个 bug，当 mode='combobox' 时，下拉选择只会展示 value 值，但是当 mode='multiple'，就能正常显示 label 值

期望显示的结果应该是 '不不不'

Answer 1

其实讲道理的是，那个option 是你自己设计的<Option key={d.value} value={d.value}>{d.label}</Option> 这样选出了的就是value值,而<Option key={d.value} value={d.label}>{d.label}</Option>，这样选出了的就是label值，所以显示设定value属性很重要

Answer 2

当 mode='combobox' 的时候，option渲然出来是什么？没有将label的值渲然出来

Answer 3

@小翼
渲染出来的就是正常的 searchData.map(d => <Option key={d.value}>{d.label}</Option>)
但是当你下拉选择的时候，获取到的都是 value 值，没有 label 值

Answer 4

我也遇到这个问题