state={url:'someurl' , stockData=[], error:false}
最初のマウント時に、APIからデータを取得し、状態に設定します。
componentDidMount() {
this.getDataFromApi();
}
データを取得し、stockDataの状態を設定するための関数
getDataFromApi = () => {
fetch(this.state.url)
.then(res => res.json())
.then(
res => {
const sortedRes = res["results"].sort(function(a, b) {
return b.ask_price - b.bid_price - (a.ask_price - a.bid_price);
});
this.setState(
{
stockData: sortedRes
}
);
},
res => this.setState({ error: true })
);
};
このデータは常に変化しています。リアルタイムの更新を取得するにはどうすればよいですか？
を使用componentWillUpdateして現在の状態と次の状態を比較しsetTimeOut、3秒の遅延を使用して使用しfetchData()てみました。これにより、それほど速く呼び出されませんでしたが、遅延が機能せず、fetchDataが短時間に何度も呼び出されていました。
componentWillUpdate(nextProps, nextState) {
if(nextState.stockData !== this.state.stockData) {
fetch(this.state.url)
.then(res => res.json())
.then(this.delay(function() {
res => {
const sortedRes = res["results"].sort(function(a, b) {
return b.ask_price - b.bid_price - (a.ask_price - a.bid_price);
});
console.log(sortedRes);
this.setState(
{
stockData: sortedRes
},
// () => console.log("SORTED RES", sortedRes)
);
},
res => this.setState({ error: true })
}, 3000)) // waits 3s
return true;
}
else {
return false;
}
}
setTimeout動作しない理由は、各呼び出しの発生を停止していないためです。それぞれを3秒遅らせているだけです。Api呼び出し全体をの中に配置することをお勧めsetIntervalしcomponentDidMountます。
componentDidMount() {
this.apiCall = setInterval(() => {
this.getDataFromApi();
}, 3000)
}
コンポーネントがアンマウントされたときにもハウスキーピングを行うことを忘れないでください。そうしないとsetTimeout、コンポーネントがDOMから削除された場合でも停止することはありません。
componentWillUnmount() {
clearInterval(this.apiCall);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加