Uncaught TypeError: loadOptions не является функцией в Async.loadOptions

Question

Я использую React-select V 2.2.x в проекте, в одном из компонентов у меня есть 2 опции выбора, которые зависят друг от друга (первая опция выбора загружает опции из удаленного источника, и когда пользователь выбирает один из его опций 2-я опция выбора активируется и на основе 1-го значения опции выбора загружает опции из удаленного источника -> так что оба они асинхронны); Вы можете увидеть их изображение ниже. 2 зависимых опции выбора. Проблема в том, что я хотел передать 1-е значение опции выбора в качестве параметра для второй опции выбора "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 не является функцией в Async.loadOptions ", может кто-нибудь сказать мне, какая у меня опция, а не передача параметра или почему передача параметра вызывает это?

Answer 1

Реагировать-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} />