Uncaught : loadOptions不是Async.loadOptions的一个函数

Question

我在一个项目中使用React select V2.2.x，在我有两个select选项中的一个组件中，它们相互依赖(第一个select-选项从远程源加载选项，当用户选择它的一个选项时；第二个select-选项被激活，基于第一个select-选项值从远程源->加载选项，因此它们都是异步的)；您可以看到它们的图像。2受抚养人选择-选项问题是，我想将第一个select-选项值作为第二个选择-选项'loadOptions‘的参数传递如下：

 <AsyncSelect cacheOptions defaultOptions loadOptions={this.filterProvince}
       id="province" className="form-field-name selector" valueKey="value"
       labelKey="label" value={province} onChange={this.provinceChange} />


<AsyncSelect cacheOptions defaultOptions loadOptions={this.getCity(province)}
     id="city" className="form-field-name selector" valueKey="value"
     labelKey="label" value={cityCode} onChange={this.cityChange} isDisabled={province ? false : true} />

下面是“getCity”函数体：

 getCity(province) {
    const{binCode,username,code} = this.state;

    if(!province || province === '' || province === null || province === undefined){
      console.log('province:',province);
        return  {options: [] ,complete:true}; //here throws an error
    } 

   //preparing data 

    reportService.getCitiesList(data) //make a request to obtain options
        .then(res => {
            console.log(res);
            if (res.success === false && res.message === 'Token is not valid') {
                userService.Authorization();
                this.getCity();
            }
            let result = JSON.parse(res.body);
            let msg = result.message;
            switch (result.Result) {
                case "false":

                    commonHelper.toaster(msg, 'e');
                    break;
                case "true":
                    //console.log(msg);
                    let cities = JSON.parse(msg);

                    const formatted = cities.map((city) => {
                        return Object.assign({}, {
                            value: city.geography_id,
                            label: city.geography_name
                        });
                    });
                    formatted.push({
                        value: '',
                        label: 'none'
                    });
                    console.log(formatted);
                    return {options: formatted , complete: true}; //also here throws an error if we get to it
                    //this.setState({cityOptions:formatted});

                    break;
            };//end of switch
        });

};//end of getCity function

所以问题是，将一个参数传递给loadOptions函数会抛出这个错误"Uncaught : loadOptions不是Async.loadOptions上的函数"，有人能告诉我我有什么选项而不是传递参数，或者为什么传递参数会导致这种情况呢？

Answer 1

return Select loadOptions接受一个方法，但是在这个代码块中，当这个选项需要一个函数时，您实际上是将返回值作为支柱传递：

<AsyncSelect cacheOptions defaultOptions loadOptions={this.getCity(province)}
     id="city" className="form-field-name selector" valueKey="value"
     labelKey="label" value={cityCode} onChange={this.cityChange} isDisabled={province ? false : true} />

我知道你想做什么(相关的选择)，这只是你如何实现它。如果provinceChange将省设置为组件状态，那么getCity将执行如下操作：

getCity = inputValue => {
  const {province} = this.state;
  // go get my city based on province, and filter by inputValue, if not null
};

// ...
<AsyncSelect loadOptions={this.getCity} />