2

反応選択コンポーネントの非同期バージョンを使用しようとしています。私は通常のバージョンでまったく問題なく動作していますが、追加するときは、プロジェクトのドキュメントからこの非同期の例を使用してみてください:

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: type は null、undefined、boolean、または number であってはなりません。文字列 (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;

問題は行の「.Async」拡張子にあるSelect.Asyncようですが、Meteor を混乱させる可能性がありますか?

4

1 に答える 1