javascript - 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"}
]

然而，搜索框被挂起并显示“正在加载...”消息，加载微调器保持不变。我可以看到 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 返回 undefined< 时会给出错误，那就太好了，但在这种情况下，它假定将使用回调来提供结果。