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 サービスが値を返す前に、誰かがドロップダウン ボックスをクリックすると、ドロップダウン ボックスがエラーをスローするようです。
エラーを停止するにはどうすればよいですか?