我正在尝试使用React-Virtualized-Select和异步API调用来加载选项,但它永远不会完成loadOptions方法。这是完整的文件:
const VirtualizedSelect = window["react-virtualized-select"].default;
class SearchElement extends React.Component {
constructor (props) {
super(props);
this.getPlayers = this.getPlayers.bind(this);
}
getPlayers(input) {
fetch(`/api/master/getAllPlayers`)
.then(function(response){
return response.json();
}).then(function(json){
var arrLength = json.length;
var objArray = [];
for (var i = 0; i < arrLength; i++){
var o = {};
o.label = json[i][0];
o.value = json[i][1];
objArray.push(o);
}
console.log(objArray);
return {options: objArray};
});
};
render () {
return (
<VirtualizedSelect
async
loadOptions={this.getPlayers}
/>
)
}
}
var searchElement = React.createElement(SearchElement);
ReactDOM.render(searchElement, document.getElementById('search'));
getPlayers中的第二个回调是将数组数组转换为对象数组; console.log按如下方式打印数组:
0:
Object
label:"harribe02"
value:"Harris"
1:
Object
label:"harribi01"
value:"Bill"
然后搜索栏中的微调器会挂起,并且从不显示“正在加载...”之后的选项。不知道如何更好地发送数据。