0

オプションをロードするために、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"

しかし、検索バーのスピナーがハングし、「読み込み中...」以降のオプションが表示されません。データをより適切に送信する方法がわからない。

4

0 に答える 0