私はティッカーに基づいて株式市場のAPIからデータを取得するアプリを構築しています。私は、サーバ上でreduxを使用しており、クライアント上で+ reduxを使用しており、ソケット間で通信するためにsockets.ioを使用しています。複数のアクションのディスパッチAPIを取得するためのAPIを取得する
私がアプリを設定したのは、最初は状態がちょうどテロップのリストで表示されます。 APIから各ティッカーに関するデータは取得されません。 (新しいユーザがソケットに接続するたびに放出される)放射された状態のイベントがあるときはいつでもクライアント側で、クライアント側で次のコードは、実際にフェッチし、次にアクション
socket.on('state', state => {
store.dispatch({
type: 'SET_TICKERS',
state
});
});
をディスパッチサーバ側からのデータは、私がcomponentDidUpdate関数内から呼び出しを行うクライアント側
class StockList extends Component {
constructor(props){
super(props);
this.renderButton = this.renderButton.bind(this);
}
renderButton(stock){
return(
<button key={stock} type='button' className='btn btn-primary stock-btn'>
{stock}
<span className='glyphicon glyphicon-remove' aria-hidden='true'
onClick={() => this.props.onClick(stock)}></span>
</button>
)
}
render() {
if(this.props.stocks){
return (
<div>
{this.props.stocks.map(stock => {
return this.renderButton(stock);
})}
</div>
)
}else{
return(
<div>Loading...</div>
)
}
}
componentDidUpdate() {
console.log('The component did update');
console.log(this.props.stocks.toJS());
this.props.fillState(this.props.currentState);
}
}
上のコンポーネントのライフサイクルフックの内部からアクションを派遣しています。この状態は、状態がテロップのリストで設定された直後に更新されます。しかし、問題は、componentDidUpdateライフサイクルフックがあまりにも多くのアクションリクエストを送信し、APIがクラッシュすることです。なぜこうなった?内部のcomponentDidUpdateからディスパッチを送信して無限ループを作成していますか?調整してこれを修正しますか?
についての詳細を読むためにあなたをお勧めしますが、コンポーネントが新しい小道具の無限の数を受信しない、それがありませんか?そのため、無制限のアクションディスパッチにもかかわらず、各ディスパッチで状態が変化しないため、コンポーネントは各ディスパッチで再レンダリングされません。最初のアクションディスパッチでのみ変更されます。 –