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

然而，搜索框暂停了＆＃34; loading ...＆＃34;消息和加载微调器停留。我可以看到API已经返回，但没有显示任何选项。

这就是我实现Select的方法我是否缺少一个选项？我已经尝试了valueKey和labelKey，但两者都没有为我工作。

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

我确定这是我如何返回数据，但不确定这出错的地方以及我需要纠正的格式。任何帮助将不胜感激。

Answer 1

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

React Select Async选项未显示

1 个答案: