反应 select 异步选项，

Question

我正在尝试将 this component 与使用 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}/>

我收到这个错误：

未捕获的不变违规：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。检查 TableModalComponent.

的渲染方法

我把它放在我页面的顶部：

Select = require('react-select'),

Answer 1

我认为您在这里有 2 个不同的选择：

要么你留在 componentDidMount 中更新本地状态的服务调用，然后你不需要异步选项，因为你可以直接将 options={this.state.schools} 传递给 select -组件，

或者您不需要本地状态（也不需要 componentDidMount 服务调用），因为您直接在 getOptions 函数中调用服务（对于异步选项 select-组件）：

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

反应 select 异步选项，

react select async option,

reactjs

react-select