0

我正在尝试使用带有异步 API 调用的 React-Virtualized-Select 来加载选项,但它永远不会完成 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"

但随后搜索栏中的微调器挂起,并且从不显示“正在加载...”之后的选项。不知道如何更好地发送数据。

4

0 回答 0