オプションをロードするために、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 の 2 番目のコールバックは、配列の配列をオブジェクトの配列に変換することです。console.log は、次のように配列を出力します。
0:
Object
label:"harribe02"
value:"Harris"
1:
Object
label:"harribi01"
value:"Bill"
しかし、検索バーのスピナーがハングし、「読み込み中...」以降のオプションが表示されません。データをより適切に送信する方法がわからない。