1

我正在尝试将此组件与使用 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);
};

MY 组件使用以下方式呈现：

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

我收到此错误：

Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查TableModalComponent.

我在页面顶部有它：

Select = require('react-select'),
4

1 回答 1

5

我认为您在这里有两种不同的选择：

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

或者您不需要本地状态（也不需要 componentDidMount 服务调用），因为您直接在 getOptions 函数中进行服务调用（对于 async-options 选择组件）：

var getOptions = function(input, callback) {
    setTimeout(function() {
        SchoolsDataService.getSchools(function(data) {
            callback(null, {
                options: data.schools,
                complete: true,
            });
        });
    }, 500);
};
于 2016-04-01T10:54:16.890 回答