реагировать выберите вариант async,

Я пытаюсь использовать этот компонент с параметрами async с использованием es5. У меня есть служебный вызов в моем componentDidmount, который устанавливает массив школ с помощью обратного вызова:

componentDidMount: function(){

    SchoolsDataService.getSchools(
        this.setSchoolsState
    );

Что устанавливает список школ в массив состояний

setSchoolsState: function(data){

    this.setState({schools: data.schools})

},

Услуга:

getSchools: function (callback) {

    var url = 'xxxx';

    request
        .get(url)
        .set('Accept', 'application/json')
        .end(function (err, res) {
            if (res.ok) {
                var data = res.body;
                if (data) {
                    callback(data);
                }
            }
        });
}

Как я могу это настроить, используя пример в документации? Куда бы я поместил вызов службы для такой асинхронной версии и сгенерировал бы список опций?

var getOptions = function(input, callback) {
setTimeout(function() {
    callback(null, {
        options: [
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' }
        ],
        // CAREFUL! Only set this to true when there are no more options,
        // or more specific queries will not be sent to the server.
        complete: true
    });
}, 500);
};

МОЙ компонент визуализируется с использованием:

  <Select.Async
         name="form-field-name"
         value="one"
         loadOptions={getOptions}/>

Я получаю такую ​​ошибку:

Неперехваченное инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Проверьте метод рендеринга TableModalComponent.

Он у меня вверху страницы:

Select = require('react-select'),

reactjs react-select
person Bomber    schedule 01.04.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я думаю, у вас есть 2 разных варианта:

Либо вы остаетесь со своим сервисным вызовом в componentDidMount, который обновляет локальное состояние, и тогда вам НЕ нужны async-options, потому что вы можете напрямую передать options = {this.state.schools} компоненту select,

Или вам не нужно локальное состояние (и вызов службы componentDidMount тоже), потому что вы выполняете вызов службы непосредственно в своей функции getOptions (для компонента выбора async-options):

var getOptions = function(input, callback) {
    setTimeout(function() {
        SchoolsDataService.getSchools(function(data) {
            callback(null, {
                options: data.schools,
                complete: true,
            });
        });
    }, 500);
};
person pierrepinard_2    schedule 01.04.2016