React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

React 純粋関数コンポーネント setState がページ更新を更新しない問題の解決方法

問題の説明:

const [textList, setTextList] = useState(元の配列);
setTextList(新しい配列);


元の配列を変更する場合、元の配列が深い配列(複数のレイヤー)である場合、setTextListを使用して変更してもページの更新はトリガーされません。

原因分析:

これには、可変オブジェクトと不変オブジェクトの知識が必要です。Vue と React では、可変オブジェクトを更新すると、ビューが更新されることがあります。これは、Vue と React がデフォルトで浅いリスナーであり、最初のレイヤーのデータのみをリッスンするためです。内部レイヤーのデータの変更は監視されません。

解決:

ここでの私の解決策は、まず元の配列のディープ コピーを作成し、それを新しい配列に割り当て、次に新しい配列を変更して変更された新しい配列を渡すことです。これにより、ビューが更新されます。

var リスト = textList.concat();
リストを連結します(インデックス、1);
setTextList(リスト);

補足: Reactでは、フックが使用されている場合、useStateの更新はコンポーネントをレンダリングしません。

react を使用して図のようなコンポーネントを記述すると、重大な問題が見つかりました。クラスを使用して記述することを選択すると、コンポーネントを通じてレンダリングを更新するのが簡単になります。
関数コンポーネント フックを使用してコンポーネントをリファクタリングすることにしたとき、非常に難しい問題が見つかりました。onChange を使用して親コンポーネントの値を変更すると、値は変更されましたが、コンポーネントは再レンダリングされませんでした。 ? ? ?
混乱したので、値を空に設定してからクラスコンポーネントに割り当てようとしました。失敗したので、フックのライフサイクルを調べてみました。 。 。 。 ------失敗した場合は、Baidu を試してください---私も同じ問題を発見しました。 。 。最後にslice()を追加するだけでよいことがわかりました。
そこでまず問題を解決するために、図の赤い円をonChange(value.slice())に変更しました。
-----それで、この魔法の問題は解決しました。

問題は解決したので、戻って何が起こったのか見てみましょう。 。 。
ドキュメントを見ると、useStateのデータは不変(割り当て不可能なオブジェクト)でなければならないという一文が見つかりました。
つまり、ass コンポーネントの状態でも不変データの使用が推奨されていますが、setState が呼び出される限り更新がトリガーされるため、これは必須ではありません。したがって、クラス コンポーネントではこの問題は発生しません。または、空に変更してから値を割り当てることで更新をトリガーできます。
ただし、useState を再度使用する場合、同じオブジェクトが更新関数に渡されると、更新はトリガーされません。
したがって、解決策は、slice() を介して新しいオブジェクトを返して値を割り当てることであり、これが問題を解決するための鍵となります。 。 。 。

上記は、React Pure Function コンポーネントの setState 更新ページが更新されない問題の詳細な解決方法です。React の useState ページが更新されない問題の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • React.memo() を使用して関数コンポーネントのパフォーマンスを最適化する方法の詳細な説明
  • React の機能コンポーネントとクラスコンポーネントの違いをご存知ですか?
  • React 関数コンポーネントとクラスコンポーネントの使い方と利点の比較

<<:  VMware vSphere 6.5 インストール チュートリアル (画像とテキスト)

>>:  CentOS 6.9 で glibc ダイナミック ライブラリをアップグレードする詳細なプロセス

推薦する

Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

Windows 10 での MySQL 8.0.22 のインストールと設定方法のグラフィック チュートリアル

MySQL 8.0.22のインストールと設定方法のグラフィックチュートリアル、参考までに、具体的な内...

MySQL ストアド プロシージャと共通関数のコード分析

mysql ストアド プロシージャの概念:特定のタスク (クエリと更新) を実行できる、データベース...

Vueは双方向データバインディングを実装します

この記事の例では、双方向データバインディングを実装するためのVueの具体的なコードを参考までに共有し...

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

jQueryは記事の折りたたみと展開の機能を実装します

この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...

JavaScript を使用してページに動的な検証コードを実装する例

導入:現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

MySQL 5.6 ルートパスワード変更チュートリアル

1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

MySQL トランザクションの詳細

目次導入取引の4つの特徴トランザクション分離レベル確認するMVCC現在の読書スナップショット読み取り...