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

Question

「Apple」と「Banana」という 2 つのタブを持つアプリケーションがあります。各タブには、useState を使用して実装されたカウンターがあります。 constTab=({name,children=[]})=>{constid=uuid();const[count,setCount]=useState(0);constonClick=e=>{e.preventDefault();setCount(c=> c+1)

P粉496886646 · Answer

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

name

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

ヒントを取得するための

name

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

P粉608647033 · Answer

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

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

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

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

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

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

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

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