2

React-Select を使用してアイテムのリストを表示しています。このリストは、Web サービスを呼び出すことによって取得されます。

React-Selectをクリックしてリストをドロップダウンすると。スローしてエラー

キャッチされていない TypeError: undefined のプロパティ 'value' を読み取れません (Select.js 行 74)

数回クリックすると、Web サービス メソッドが呼び出され、コードが正しく機能し始めることがわかります。

そのため、誰かがクリックすると、最初の数秒間は react-select がエラーをスローするようです。しかし、しばらくすると、Web サービス メソッドの呼び出しが開始され、そこから結果が取得され、正しく表示されます。

私のコードはとてもシンプルです

    <Select multi simpleValue
        name="foo"
        value={selectedItem}
        clearable={false}
        options={allItems}
        onChange={updateItem}
        optionRenderer={renderItem}
        valueRenderer={renderLabel}
    />

メソッド内にデバッグステートメントがありますupdateItem

export function updateItem({field, params}) {
    console.log('going to make webservice request');
    return dispatch => {
        callWebService(params).then(response => {
            console.log('got response');
            const key = Object.keys(response[0])[0];
            const options = response.map(item => ({
                label: item[key], value: item[key]
            }));
            dispatch(populateChannels(options));
        });
    };
}

ページが読み込まれると印刷されていることがわかり'going to make webservice request' ますが、反応選択をクリックするとエラーがスローされます。

ドロップドロップを5/6回クリックすると、最終的に「応答がありました」というメッセージが表示され、エラーメッセージが消えてドロップダウンが正常に機能します。

そのため、Web サービスが値を返す前に、誰かがドロップダウン ボックスをクリックすると、ドロップダウン ボックスがエラーをスローするようです。

エラーを停止するにはどうすればよいですか?

4

2 に答える 2