异步选择反应不加载选项答案

【问题标题】：Async Select in react not loading options异步选择反应不加载选项
【发布时间】：2022-02-15 05:50:39
【问题描述】：

我正在尝试使用 React-Select 动态加载选择字段的选项。这是我在 Select 中返回 loadOptions 的方法。

 onChange(e)  {
    console.log("Value Printed : " + e);
 if(e.length > 3) {


 new Promise(resolve => {
    setTimeout(() => {           
    const url = `http://localhost:3010/cityNames?name=${e}`;
    fetch(url)
   .then(results => results.json())
   .then(data => {        
       var options = [];    
        options = data;
        console.log("return value from server: " + JSON.stringify(data));
        return {options: data};
   });
    }, 1000);
});

} else {console.log("Enter 3 chars");}
};

但我的选项没有显示。

这里是渲染组件。

   <AsyncSelect
    isClearable
    loadOptions={this.onChange}
    onInputChange={this.onChange}
   />

控制台日志显示正确的结果。我的数据变量是：

 [{"label":"Dallas","value":680780}]

【问题讨论】：

显示data变量
已更新。谢谢

标签： reactjs react-select

【解决方案1】：

显然，当获取数据时，您的组件不会重新渲染。尝试改用状态。

.then((data) => {      
    this.setState({ options: data });
});

内部渲染：

<Select
   isClearable
   options={this.state.options}
   onInputChange={this.onChange}
/>

顺便说一句，我真的怀疑你必须使用 Async React Select。我认为正常的就足够了，稍微改变一下逻辑。

您的代码应如下所示：

onChange = (inputValue) => {
  if (inputValue.length > 3) {
      const url = `http://localhost:3010/cityNames?name=${inputValue}`;
        fetch(url)
          .then(results => results.json())
          .then(data => {
             this.setState({
                options: data,
             });
          });
    });
};

【讨论】：

好吧，它没有在控制台中给出任何错误，也没有在浏览器上显示选项。
console.log 显示了我从后端获取的值，但它没有显示
这里又是数据变量。 [{"label":"Dallas","value":680780}]
@ShivaNara 用普通的反应选择替换你的异步选择，它应该没问题
但是当我清除文本并输入新文本时，它没有获取新结果？

【解决方案2】：

添加了一个 key道具 key={options.length} 修复了选项稍后更改时不呈现选项的问题。也可以随意使用这个或类似的方法来修复。

 <AsyncSelect
    key={options.length}
    loadOptions={options}
   />

【讨论】：