反应选择组件不起作用答案

【问题标题】：React-select component not working反应选择组件不起作用
【发布时间】：2016-02-16 18:57:39
【问题描述】：

我正在尝试使用 react-select component 的异步版本。我的正常版本工作得很好，但是当我添加尝试使用this async example from the project documentation:

var Select = require('react-select');

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"
    loadOptions={getOptions}
/>

我在控制台中收到此错误：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 ReactClass（用于复合组件）。检查渲染方法 OrderHeaderEdit.

我一直在尝试将其调试到 React 代码中，但我终其一生都无法弄清楚发生了什么。

这是我完整的组件代码，上面有异步选择组件。此控件在 Meteor 1.3 应用程序中运行：

import React from 'react';
import Select from 'react-select';

const OrderHeaderEdit = React.createClass({

    getOptions(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);
    },

    render() {
        console.log("OrderHeaderEdit props: ", this.props);

        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);
        };

        return (
            <div>

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

            </div>
        );
    }
});

export default OrderHeaderEdit;

似乎问题可能出在Select.Async 行中的“.Async”扩展名上，这会不会让 Meteor 感到困惑？

【问题讨论】：

标签： meteor reactjs react-select

【解决方案1】：

我发现了问题所在：从 npm 安装当前安装的是 0.9.x 版本，但文档和示例已经更新到 1.0.0-betaX 版本，该版本发生了重大变化。

所以，Select.Async 确实是问题所在，该语法仅从 1.0 开始作为 discussed in this list of breaking changes in 1.0.0 存在于 react-select github 存储库中。更新我的代码以使用 1.0.0-beta9 版本解决了这个问题。

【讨论】：