[解決済み] React - アンマウントされたコンポーネントでの setState()
2023-01-16 11:49:43
質問
私のリアクトコンポーネントでは、ajaxリクエストが進行している間、単純なスピナーを実装しようとしています - 私はロード状態を保存するために状態を使用しています。
何らかの理由で、私のReactコンポーネントの以下のコード片は、このエラーを投げます。
マウントされたコンポーネントまたはマウントされているコンポーネントしか更新できません。これは通常 マウントされていないコンポーネントで setState() を呼び出したことを意味します。これはno-opです。 未定義のコンポーネントのコードを確認してください。
最初のsetStateの呼び出しを取り除くと、エラーは消えます。
constructor(props) {
super(props);
this.loadSearches = this.loadSearches.bind(this);
this.state = {
loading: false
}
}
loadSearches() {
this.setState({
loading: true,
searches: []
});
console.log('Loading Searches..');
$.ajax({
url: this.props.source + '?projectId=' + this.props.projectId,
dataType: 'json',
crossDomain: true,
success: function(data) {
this.setState({
loading: false
});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
this.setState({
loading: false
});
}.bind(this)
});
}
componentDidMount() {
setInterval(this.loadSearches, this.props.pollInterval);
}
render() {
let searches = this.state.searches || [];
return (<div>
<Table striped bordered condensed hover>
<thead>
<tr>
<th>Name</th>
<th>Submit Date</th>
<th>Dataset & Datatype</th>
<th>Results</th>
<th>Last Downloaded</th>
</tr>
</thead>
{
searches.map(function(search) {
let createdDate = moment(search.createdDate, 'X').format("YYYY-MM-DD");
let downloadedDate = moment(search.downloadedDate, 'X').format("YYYY-MM-DD");
let records = 0;
let status = search.status ? search.status.toLowerCase() : ''
return (
<tbody key={search.id}>
<tr>
<td>{search.name}</td>
<td>{createdDate}</td>
<td>{search.dataset}</td>
<td>{records}</td>
<td>{downloadedDate}</td>
</tr>
</tbody>
);
}
</Table >
</div>
);
}
問題は、コンポーネントがすでにマウントされているはずなのに、なぜこのエラーが発生するのかということです (componentDidMount から呼び出されているため) 私は、コンポーネントがマウントされたら状態を設定しても安全だと考えていました。
どのように解決するのですか?
レンダー関数を見ることなく、少し厳しいです。すでに何かを見つけることができますが、インターバルを使用するたびに、アンマウント時にそれをクリアするようになった。ということです。
componentDidMount() {
this.loadInterval = setInterval(this.loadSearches, this.props.pollInterval);
}
componentWillUnmount () {
this.loadInterval && clearInterval(this.loadInterval);
this.loadInterval = false;
}
これらの成功やエラーのコールバックはアンマウント後も呼び出されるかもしれないので、interval変数を使ってマウントされているかどうかを確認することができます。
this.loadInterval && this.setState({
loading: false
});
これでうまくいかない場合は、レンダー関数を提供してください。
乾杯
関連
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] React jsのonClickはメソッドに値を渡すことができない
-
[解決済み] Reactコンポーネント外でのクリックを検出する
-
[解決済み] ReactのsetStateでオブジェクトを更新する
-
[解決済み】React:setStateを使用してstateのstate.item[1]を更新するには?
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】マウントされていないコンポーネントに対してReactの状態更新を行うことができない
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?