React-Select多值不会像示例中那样填充选定的项目

Question

我正在尝试在我的应用程序中使用react-select（https://github.com/JedWatson/react-select），我有一个选项框，其选项是动态加载的（即我调用后端来获取数据）。现在我可以看到我的下拉列表中填充的所有选项，但是当我点击任何项目onChange（）事件有效但该元素没有从下拉列表中解除填充并在顶部显示像标记一样，如官方示例所示。我的选择框：

<Select
    multi={true}
    name="form-field-name"
    options={this.props.metadata ? this.props.metadata["latest"].languages : []}
    labelKey="display_name"
    valueKey="id"
    onChange={this.addLanguage}
    clearable={false}
    value="id"
/>

这会在UI上显示我：

这里我已经从列表中选择了两个元素，但它们没有显示在顶部，如下例所示：

我在我的组件中导入了js和css，如下所示：

import Select from 'react-select';
import 'react-select/dist/react-select.css';

更新

添加多个项目时：

Answer 1

可能是因为您设置字段value="id"在官方文档中value字段定义为initial field value

所以基本上，在您的代码段中，最初会分配一个静态值，并且在您选择更多结果时不会获得任何更新。

在作者的example代码中，使用多选组件，如下所示：

<Select 
  multi 
  simpleValue 
  disabled={this.state.disabled} 
  value={this.state.value} 
  placeholder="Select your favourite(s)" 
  options={this.state.options} 
  onChange={this.handleSelectChange} />

因此，只要有更改，onChange事件就会使用handleSelectChange方法。

handleSelectChange (value) { console.log('You\'ve selected:', value); this.setState({ value }); },

此方法然后更新this.state.value，用于显示组件的选定值。

我不知道您的this.addLanguage方法当前做了什么，但如果我们将作者的示例作为基线，那么您需要的是value="id"而不是value={this.state.value}将其更新为this.addLanguage，并使用this.state.value方法更新{{1}}

的值