問題タブ [use-reducer]

現在、アプリケーションを Context プロバイダー (useReducer から値を取得) でラップし、useEffect フックを使用して子コンポーネントを介して更新するときに、無限ループの作成を回避する方法を見つけようとしています。

ここ CodeSandboxに問題の例があります。

ここにすべてのコードを再投稿せずに問題について話すのは明らかに難しいですが、重要な点は次のとおりです。

根：

子：

明らかな何かが欠けている可能性がありますが、ポインタは同じ問題に遭遇した他の人を助けるかもしれません.

CodeSandbox の完全な例。

このコードを実行しようとしましたが、実行時エラーが表示されます

TypeError: オブジェクトは反復可能ではありません (プロパティ Symbol(Symbol.iterator) を読み取れません)

これがコードです。

エラーはこのコード行を指していますconst [{}, dispatch] = useContext(GlobalContext);

GlobalState コード

Reacts 機能コンポーネント スタイルを使用して、再利用可能なテーブルのようなコンポーネントを開発します。テーブルは、React.useReducer を使用してその状態を保持、管理、および検証します。各行には、行/テーブルの状態を変更するためのいくつかの入力フィールド、チェックボックス、およびアクション ボタンがあります。

これで、GUI の別の場所 (テーブルの子ではない) に保存ボタンができました。状態をテーブルから取得して、(他のデータと共に) 永続化のために REST-Endpoint に送信できるようにするにはどうすればよいでしょうか?

私たちの実際の解決策は、テーブルの小道具として設定されるコールバック関数です。この関数は、現在の状態のコピーを公開するために各レンダリング後に table-component 内から呼び出されます。このコールバック関数の所有者は、このデータを取得して保持し、Save-Button のスコープで使用できるようにします。

これは実際に機能しますが、そのようなユースケースにはもっと良い方法があると考えています。テーブルは再利用可能である必要があり、保存ボタンは GUI のまったく別の場所 (ツールバーやメニューなど) に配置される可能性があるため、テーブルから ComponentWrapper に状態を持ち上げたくありません。

これに関するアイデアはありますか？前もって感謝します。

値をカウントするための Counter という名前のクラスがあり、このクラスには、カウントに使用される inc と dec という 2 つのメソッドがあります。CounterEdit という名前の入力コンポーネントを作成し、値プロパティを Counter クラス インスタンスに接続します。カウンター クラスのカウント値が変化したときに、入力コンポーネントの更新値が必要です。これを行うには、useCounter という名前の新しいフック関数を作成します。この関数は、useReducer 自体を使用し、useReducer のディスパッチ関数を Counter クラスに渡します。カウンタークラスはそれ自体で値を増減し、ディスパッチ関数を使用してカウント値をレデューサーに送信します。レデューサーのステータスが変化すると、入力コンポーネントが更新されます。しかし、複数の入力コンポーネントを使用すると、最後の入力コンポーネントのみが更新されます。他に変更はありません。私が間違っているところについてあなたの助けを待っています。ありがとう...

そして今、これでクラスコンポーネントにレデューサーを使用したい

そして、ここで入力コンポーネントがレデューサーから値を取得しています:

このアプリを実行すると、3 番目の入力値のみが変更されます。すべての入力インスタンスにカウンター値を反映させたい。

応募内容：