Question

我正在尝试使用es {this component和async选项。我在componentDidmount中有一个服务调用，它使用回调设置schools数组：

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'),

Answer 1

我认为你有两种不同的选择：

要么继续使用componentDidMount中的服务调用来更新本地状态，那么就不需要async-options，因为你可以直接将options = {this.state.schools}传递给select-component，

或者您不需要本地状态（也没有componentDidMount服务调用），因为您直接在getOptions函数中执行服务调用（对于async-options select-component）：

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

反应选择异步选项，

1 个答案: