APIからいくつかのデータをフェッチするReactコンポーネントのメソッドがあります
this.state.matchesは、最初は空の配列を返します
loadMatches() {
let matches = this.state.matches;
forEach(this.state.matchIds.splice(0,5), matchid => {
axios.get(url)
.then(function (response) {
matches.push(response.data)
})
});
this.setState({
matches
})
}
そして、データをReactコンポーネントにマップする必要があるメソッド
renderMatch() {
return this.state.matches.map((match, index) => {
return (
<Match
key={index}
gameId={match.gameId}
/>
);
});
}
renderMatch（）はrenderメソッドで呼び出されますが{this.renderMatch()}、何もレンダリングされません。.lengthを呼び出すと、配列に5つのオブジェクトが含まれていることがdevtoolsで確認できても、0が返されます。配列内のハードコードされたオブジェクトがレンダリングされます
Reactが新しいレンダリングをトリガーしないように、状態を変更しています。状態をプッシュするのではなく、新しい配列を作成する必要があります。
loadMatches() {
let promises = [];
forEach(this.state.matchIds.splice(0,5), matchid => {
promises.push(axios.get(url).then(res => res.data));
});
Promise.all(promises).then(matches => {
this.setState({
matches
});
});
}
非同期を処理するように編集されました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加