React Select 异步选项未显示

Question

我有一个 API 调用正在返回数据，我能看到的最好的是我以正确的方式返回选项，但由于某些原因我无法让 React Select 显示选项。有什么我想念的吗？

searchGroups(searchString){
    if(!searchString) return Promise.resolve({ options: [] });
    UserGroups.getUserGroups(searchString).then((res) => {
      let groups = [];
      groups = res.groups.map((d) => ({
        value: d.group_ID,
        label: d.group_name
      }))
      return {options: groups};
    }, (e) => {
      this.setState({
        searchError: e.message
      })
    })
  }

据我所知，groups 数组（根据搜索）返回为

[
    {value: 1, label: "Admins"}
    {value: 22, label: "Asset Group"}
    {value: 2, label: "Read-only"}
]

但是，搜索框正在暂停并显示 "loading..." 消息，加载微调器保持不变。我可以看到 API 已返回，但未显示任何选项。

这就是我实现 Select 是否缺少一个选项？ valueKey 和 labelKey 我都试过了，但都不适合我。

<Select.Async
      multi={true}
      onChange={this.onChange}
      loadOptions={this.searchGroups}
      value={this.state.value}
 />

我确定这是我返回数据的方式，但不确定哪里出了问题以及我需要更正哪些格式。任何帮助将不胜感激。

Answer 1

问题是 UserGroups.getUserGroups(.. 之前缺少 return。这导致异步代码被执行并显示在网络日志中，但结果不会达到 Select.Async。如果 react-select 在调用 loadOptions returns undefined 时会报错就好了，但在那种情况下，它假定将使用回调来提供结果。

React Select 异步选项未显示

React Select Async options not showing

javascript

reactjs

react-select