问题描述
我正在尝试利用<AsyncSelect />
从API中提取选项以填充表格。
它可以找到我第一次搜索的东西,我可以选择该选项,然后提示再次输入。
但是,当我键入其他内容时,即使看到数据显示在console.log()中,我也会得到No Options
。
import React,{ Component } from 'react';
import AsyncSelect from 'react-select/async';
type State = {
inputValue: string,};
const promi@R_404_6221@ptions = inputValue =>
new Promise(resolve => {
setTimeout(() => {
resolve(
fetch('https://restcountries.eu/rest/v2/all')
.then(r => r.json())
.then(rjson => {
return rjson.map(c => {
return { name: c.name,label: c.name}
})
})
);
},1000);
});
export default class AsyncMulti extends Component<*,State> {
state = { inputValue: '' };
handleInputChange = (newValue: string) => {
const inputValue = newValue.replace(/\W/g,'');
this.setState({ inputValue });
return inputValue;
};
render() {
return (
<AsyncSelect
isMulti
loadOptions={promi@R_404_6221@ptions}
/>
);
}
}
解决方法
我刚刚意识到在Promise中返回的对象:
{ name: c.name,label: c.name }
键输入错误,应该是:
{ value: c.name,label: c.name }
现在可以使用了。