問題タブ [use-context]

TestContext.js

TestComponent.jsx

TestComponent1.jsx

App.js

手順: http://localhost:3000/ testを開き、submit ボタンをクリックし、console.log が false を出力し、別のタブでhttp://localhost:3000/ test1を開き、submit ボタンをクリックし、 console.logが false を出力します (はまだ偽です。TestComponent の値を変更しましたか? )

次に、以下のように「checkoutDrawer.toggleCheckoutDrawer()」を呼び出した後に console.log を追加しました。

これで、console.log に false false が出力されます。( checkoutDrawer.toggleCheckoutDrawer() の後に console.log も false を出力するのはなぜですか? )

React アプリケーションには、次の両方の変数があります。

1. でグローバル状態として定義され、 setter メソッドを使用してをApp.js介して他のコンポーネントにグローバルに渡されます。GlobalContext.Provider
2. アプリの多くのルートのルート パラメーターとして個別に使用されます。

以下は、App.jsファイルの関連セクションの短いコード スニペットです。

competitionグローバル状態にはキーvalueとlabelがありcompetitionId、url パラメータの は値と同じ値competition.valueです。

のグローバルな状態値は、ウィジェットを使用してコンポーネントcompetitionで変更されることを意図しています。このウィジェットが切り替えられると、グローバル状態が更新され、フックを使用してアプリを新しいルートにプッシュし、updated を使用してurl パラメーターを設定します。<Navbar>selectuseHistorycompetition.valuecompetitionId

の値competitionは、アプリケーションの多くのコンポーネントで必要です。これには、url パラメーターがないコンポーネント (<HomePage>コンポーネント内など) も含まれます。このため、他のすべてのコンポーネントに渡されるグローバル変数として必要であると感じています。変数はuseContextフックを使用してどこからでも簡単にアクセスできるため、これは私たちにとっても非常に便利です。

ただし、この値はURL パラメーターにも必要なようです。これらのコンポーネントは、渡されたものに基づいてさまざまなデータを取得competitionIdします。それらが URL パラメーターに含まれていることは、アプリのルーティングの大部分を占めています。

問題は、ユーザーが Web サイトの URL を手動で変更できることです。これにより、変数のグローバルな状態を変更せずに URL パラメータを変更できます。ウィジェットではなく手動で URL を変更するとselect、グローバル状態と URL パラメータが同期しなくなります...

編集：select値を切り替えるために使用するコンポーネントは次のとおりcompetitionです（投稿が長くなって申し訳ありません）。この選択は Navbar に表示され、外部にあるためグローバルにアクセスできます<Switch>。

このコンポーネントは、技術的にはif, if else, else句の非同期の問題を解決しますが、が呼び出されるたびsetCompetition(correctGlobalState)に、React は次の警告メッセージをスローします。

Warning: Cannot update a component (アプリ) while rendering a different component (コンペティション選択). To locate the bad setState() call inside コンペティション選択, follow the stack trace as described...