Uncaught TypeError: loadOptions is not a function at Async.loadOptions

Question

我在一个项目中使用 React-select V 2.2.x，在其中一个组件中我有 2 个 select-选项，它们相互依赖（第一个 select-选项从远程源加载选项，当用户 select 是其选项之一时；第二个 select-选项被激活并基于第一个 select-选项值从远程源加载选项 -> 所以两者都是异步的）；你可以在下面看到他们的图片。 2 dependant selec-options 问题是我想将第一个 select-option 值作为第二个 select-option '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 TypeError: loadOptions is not a function at Async.loadOptions "，谁能告诉我我有什么选项而不是传递参数，或者为什么传递参数会导致此错误？

Answer 1

React-Select loadOptions 采用方法，但在这段代码中，您实际上将 return 值作为 prop 传递，当 prop 需要一个函数时：

<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} />

我明白你想做什么（相关 select），这只是你如何实施它。如果 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} />

Uncaught TypeError: loadOptions is not a function at Async.loadOptions

Uncaught TypeError: loadOptions is not a function at Async.loadOptions

javascript

reactjs

react-select