useEffect内でsetStateを使用するときにReactコードで無限ループを防ぐ方法
アダム
codesandboxを確認してください：https：//codesandbox.io/s/bold-hamilton-k1nzs
コードを実行すると、無限ループが発生します。コンソールをチェックして、エントリが指数関数的にどのように増加するかを確認できます。そして最終的にウェブサイトがクラッシュします。
私はこのような状態変数を持っています：
const [checkbox, setCheckBox] = useState({});
次に、useEffect内の関数を呼び出しています。
useEffect(() => {
createCheckbox();
});
これはcreateCheckbox関数です。
const createCheckbox = () => {
let checkboxObj = {};
rows.forEach((e) => {
checkboxObj[e.id] = false;
});
setCheckBox(checkboxObj);
};
問題を紹介するために、76行目にconsole.logがあります。console.log（チェックボックス）です
何が起こっているのか考えていますか？
ドリューリース
問題
useEffect(() => {
createCheckbox();
});
useEffectそれはコンポーネントをレンダリングするたびに実行されますので、フックには依存していない、とフックのコールバックが、最終的に状態を更新するので、それは別のレンダリングサイクルをトリガします。すすぎ、繰り返し、吐き気を催します（つまり、レンダリングのループ）。
解決
基本的に、最初のロード時にチェックボックスを空/ falseとして初期化します。
useEffect空の依存関係配列を使用して、コンポーネントのマウント時にエフェクトを1回実行できます。
useEffect(() => {
createCheckbox();
}, []);
または、useStateフックで遅延状態初期化関数を使用します。
const [checkbox, setCheckBox] = useState(() => {
let checkboxObj = {};
rows.forEach((e) => {
checkboxObj[e.id] = false;
});
return checkboxObj;
});
デモ
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
TOP 一覧
- 1
グラフからテーブルに条件付き書式を適用するにはどうすればよいですか？
- 2
ソートされた検索、ターゲット値未満の数をカウント
- 3
Unity：未知のスクリプトをGameObject（カスタムエディター）に動的にアタッチする方法
- 4
セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか？
- 5
Ansibleで複数行のシェルスクリプトを実行する方法
- 6
Reactでclsxを使用する方法
- 7
tkinterウィンドウを閉じてもPythonプログラムが終了しない
- 8
Windows 10 Pro 1709を1803、1809、または1903に更新しますか？
- 9
Pythonを使用して同じ列の同じ値の間の時差を取得する方法
- 10
PowerShellの分割ファイルへのヘッダーの追加
- 11
Chromeウェブアプリのウェブビューの高さの問題
- 12
BLOBストレージからデータを読み取り、Azure関数アプリを使用してデータにアクセスする方法
- 13
Crashlytics：コンパイラー生成とはどういう意味ですか？
- 14
GoDaddyでのCKEditorとKCfinderの画像プレビュー
- 15
Windows 10の起動時間：以前は20秒でしたが、現在は6〜8倍になっています
- 16
MLでのデータ前処理の背後にある直感
- 17
モーダルダイアログを自動的に閉じる-サーバーコードが完了したら、Googleスプレッドシートのダイアログを閉じます
- 18
reCAPTCHA-エラーコード：ユーザーの応答を検証するときの「missing-input-response」、「missing-input-secret」（POSTの詳細がない）
- 19
STSでループプロセス「クラスパス通知の送信」のループを停止する方法
- 20
ファイル内の2つのマーカー間のテキストを、別のファイルのテキストのセクションに置き換えるにはどうすればよいですか？
- 21
ネットワークグラフで、ネットワークコンポーネントにカーソルを合わせたときに、それらを強調表示するにはどうすればよいですか？
コメントを追加