React-Select loadOptions不起作用

时间:2017-09-18 04:43:55

标签: javascript reactjs react-select

在github用户示例之后,我在loadOptions中有以下getCodes函数。 promise中返回的选项在获取调用后有效。但是,问题是下拉菜单没有显示这些选项,只是说“键入搜索”。

getCodes(input) {
    if (!input) {
      return Promise.resolve({
        options: [
          {label: 'Delhi', value: 'DEL'},
          {label: 'Mumbai', value: 'MUM'}
        ]
    });
}
const url =  'http://iatacodes.org/api/v6/autocomplete?query=' + input + '&api_key=' + KEY;

var proxyUrl = 'https://cors-anywhere.herokuapp.com/';

return fetch(proxyUrl+url)
  .then((response) => {
   return response.json();
  }).then((json) => {
    var options = [];
    _.each(json['response']['airports'], (airport) => {
      options.push({
        label: airport['name'],
        value: airport['code']
      })
    });
    console.log(options);
    return options;
  });
}


fromLocChange(o) {
    this.setState({...this.state, fromLoc: o.value});
}

<Select.Async
    name="form-field-name"
    className="selector"
    valueKey="value"
    labelKey="name"
    value={this.state.fromLoc}
    onChange={this.fromLocChange}
    clearable={false}
    loadOptions={this.getCodes}
/>

输出上面的console.log用于搜索字词&#39; JAI&#39;是:

[
    {label: "Sanganeer", value: "JAI"},
    {label: "Jaisalmer", value: "JSA"}
]

选择器的屏幕截图:

image

0 个答案:

没有答案