React-Select loadOptions不起作用

时间:2016-12-24 04:19:33

标签: javascript json reactjs react-select react-virtualized

我正在尝试使用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"

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

0 个答案:

没有答案