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 ダイナミック ライブラリをアップグレードする詳細なプロセス

推薦する

jQueryはシンプルなボタンの色の変更を実装します

HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...

MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Docker-compose を使用して Django アプリケーションをオフラインでデプロイする方法

目次開発環境用のDocker-ceをインストールする開発環境用のDocker-composeをインス...

Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...

Pycharmとsshリモートアクセスサーバーdockerの詳細なチュートリアル

背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...

過去の Linux イメージの問題を修正するためのサンプル分析

過去の Linux イメージに関する問題を修正従来の Linux イメージで作成された ECS クラ...

CentOS での samba フォルダ共有サーバー構成の詳細な説明

1. はじめに最近、CentOS での開発には多くの不便があることがわかりました。Windows/M...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

<td></td> タグの境界線スタイルがブラウザに表示されない問題の解決方法

質問: 360ブラウザの互換モードなど、一部のブラウザでは、 <td style="...

Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル

Win10 システムでの MySQL 8.0.20 のインストールと設定の超詳細なチュートリアルMy...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明

目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...