const [watchValue、setWatchValue] = useState(''); const [otherValue1, setOtherValue1] = useState(''); const [otherValue2, setOtherValue2] = useState(''); 使用効果(() => { 何かを実行します(他の値1、他の値2); }, [watchValue, otherValue1, otherValue2]); ここで厄介な疑問が浮かびます。
この問題は、 const [watchValue、setWatchValue] = useState(''); const other1 = useRef(''); other2 は useRef() を使用します。 // 参照は変更されないため、依存関係配列に ref を追加する必要はありません useEffect(() => { 何かを実行します(other1.current、other2.current); }, [ウォッチ値]); この方法では、 これは 「react」から useState、useRef をインポートします。 // useState の応答性を維持しながら useRef の参照特性を使用する type StateRefObj<T> = { _状態: T; 値: T; }; デフォルト関数 useStateRef<T>( をエクスポートする 初期状態: T | (() => T) ): StateRefObj<T> { // 初期化値 const [init] = useState(() => { if (typeof initialState === "function") { 初期状態を () => T として返します (); } 初期状態を返します。 }); // コンポーネントのレンダリングをトリガーする状態を設定します。const [, setState] = useState(init); // 値を読み取ると、最新の値が取得されます // 値を設定すると、setStateがトリガーされ、コンポーネントがレンダリングされます const [ref] = useState<StateRefObj<T>>(() => { 戻る { _状態: 初期化、 値を設定する(v: T) { this._state = v; 状態を設定します。 }, 値を取得する() { this._state を返します。 }, }; }); // 返されるのは参照変数であり、コンポーネントのライフサイクル全体を通じて変更されません。 return ref; } したがって、次のように使用できます。 定数ウォッチ = useStateRef(''); const other1 = useStateRef(''); const other2 = useStateRef(''); // 値を次のように変更します: watch.value = "new"; 使用効果(() => { 何かを実行します(other1.値、other2.値); // 実際、これら 3 つの値は参照変数となり、コンポーネントのライフサイクル全体で変更されないため、依存関係配列を追加する必要はありません。 // ただし、React Hooks の eslint プラグインは、useRef を参照としてのみ認識できます。追加されていない場合は警告が表示されます。変数参照の安全性のため、引き続き追加されます。 }, [watch.value, other1, other2]); このように、 上記は、フック依存性のトラブルを解消するためのReactのヒントの詳細です。Reactフック依存性の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 実稼働環境でのNginx高可用性ソリューションの実装プロセスの分析
>>: CentOS 7 での mysql 5.7 のインストール チュートリアル
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...
1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...
シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
1. 追加時間()指定した秒数を日付に追加する select addtime(now(),1); -...
エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...
目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...
目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...
仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...
目次情事の概念取引の状態取引の役割取引の特徴トランザクション構文トランザクション対応ストレージエンジ...
この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...
1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...