useState が異なる props を持つルート間で共有されるのはなぜですか?

Question

「Apple」と「Banana」という 2 つのタブを持つアプリケーションがあります。各タブには、useState を使用して実装されたカウンターがあります。

リーリー

ややこしいのは、カウンタの状態が 2 つのタブ間で共有されていることです。

あるタブでカウンタを増分してから別のタブに切り替えると、カウンタも変化します。

＃＃＃何故ですか？

---

これが私の完全なアプリケーションです:

リーリー

＃＃＃バージョン：＃＃＃ ああああ

---

Answer 1

Adam はここで何が起こっているのかについて良い説明と答えを持っています。これは、URL パスが変更されたからといって同じ React コンポーネントを破棄して再インストールすることのない最適化です。 React キーを使用すると、この問題は確実に解決されます。 React は Tab コンポーネントを強制的に再マウントし、それによって count 状態を「リセット」します。 別のアプローチをお勧めします。

name

属性が "apple" から "banana" に変更されたときに、ルーティング コンポーネントをマウントしたままにし、簡単にリセットすることです。 count ステータス、またはその逆。 リーリー これにより、RRD の最適化は、ユーザーに不利になるのではなく、ユーザーに有利に機能するようになります。

ヒントを取得するための

name

のような渡されたプロパティがない場合は、 location.pathname を使用できます。これにより、一部の内部コンポーネント ロジックが外部の詳細と結合されることに注意してください。 ＃＃＃例：＃＃＃ リーリー

Answer 2

これは、react-router-dom の Switch で動作します

最終的には、ルートを切り替えてもコンポーネント ツリーは変わりません。

常にルーター -> スイッチ -> ルーティング -> タブ

Switch の動作方法により、React は新しいコンポーネントを「インストール」することはなく、可能なので古いツリーを再利用するだけです。

以前にもこの問題が発生したことがありますが、その解決策は、Tab や Route などのどこかにキーを追加することでした。私は通常、これを Route に追加します。これは、私にとってより意味があるためです。 リーリー

このスタックブリッツをチェックしてください:

https://stackblitz.com/edit/react-gj5mcv ?file=src/App.js

もちろん、各タブがアンロードされると、各タブの状態はリセットされますが、これが理想的な場合もそうでない場合もあります。しかし、これに対する解決策は、もちろん（これがあなたにとって問題である場合）、いつものようにステータスを高めることです。