問題タブ [use-reducer]

ダッシュボードにレンダリングされるコンポーネントを制御する useReducer を使用するカスタム フックがあります。親では期待どおりに動作しますが、子で使用すると useReducer が実行され、状態が変更されますが、親コンポーネントでは変更されないため、適切な変更で再レンダリングされません。レデューサーでスプレッド演算子を使用して、新しいオブジェクトを返しています。フック内に追加の useStates と useEffects を使用していくつかのハッキーなことを試しましたが、どれも影響がありませんでした。さまざまなレベルの破壊を試みましたが、効果もありません。状態が変化しているのがわかりますが、親オブジェクト内で返されたときに新しいオブジェクトとして認識されていないようです。

カスタムフック

親コンポーネント

子コンポーネント

私は元々、useState フックがいたるところに渡されている厄介なプロップドリルがたくさんあったものからリファクタリングしようとしています。私は Next.js を使用していますが、Context API の使用や Redux の導入を避けようとしています。個々のページ コンポーネントの状態を永続化する必要があるだけであり、ほとんどのデータをアポロ フックで処理しているため、それは実際には単なるローカル UI 状態です。

React フック useReducer を使用して、複雑な多層フォーム データを状態で処理しています。

このチュートリアルの指示に従いました: https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937。

チュートリアルでは、チェックボックスの状態は状態オブジェクトの最上位に設定されています。ただし、私のチェックボックスは最上位レイヤー (正確にはレイヤー 3) の下にあります。問題は、私のチェックボックスコンポーネントがその状態値を変更することですが、レベル3にあるはずの場所ではなく、最上位に配置されることです.

チュートリアルの State
isMemberが最上位にある

私の状態
が有効になっているのは最上位レベルより下です

以下は updateForm 関数の私の実装です:

ディスパッチ関数とレデューサー関数に対してさまざまなアプローチを試みました。また、ディスパッチ関数とレデューサー関数の関係を理解し​​ようとしましたが、レデューサーのアクション パラメーターが関数型の場合に何が起こっているのかを理解するのに役立つものは見つかりませんでした。

チュートリアルのチェックボックスのディスパッチ/リデューサー機能の関係で何が起こっているのかを理解するために、あなたの助けを本当に使うことができました. 私が調査したところ、これはレデューサーのアクション パラメーターのコンストラクター型を使用して決定を行う唯一の実装です (コンストラクター === 関数 & コンストラクター === オブジェクトを使用)。私が理解していることから、通常は代わりに switch() ステートメントが使用されており、オンラインで見つけることができたのはそれだけです。

また、チェックボックスを取得して状態の値を正しく変更する方法を理解するために、あなたの助けを借りることもできます。基本的に、最上位レイヤーの下にあるこのコンポーネントの状態を変更するにはどうすればよいですか?

こんにちは、react はまだ新しいので、問題とエラーが発生しています。

エラー: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。または、デフォルトのインポートと名前付きインポートを混同している可能性があります

.

私は認証コンポーネントを作成しましたが、「のレンダリングメソッドを確認してください」というエラーが表示さAuthProviderれました。エラーは認証コンポーネントの「AuthProvider」機能に起因すると思われ、解決方法がわかりません。

スクリーンショット: https://imgur.com/CC7uO6A

auth.js

app.js

次のようにデータを返す API からフェッチされたデータを使用してグラフを作成しようとしています。

グラフとして表示すると日付文字列が長すぎるので、年の部分を取り除いて短くしたい。

2020-03-06になる03/06

Robin Wieruch による優れたチュートリアルに従って、データをフェッチするためのカスタム フックが作成されました。

React Hooks で書かれた私のチャート作成コンポーネントと共に:

上記の作品。しかし、レンダリング中に 2 回呼び出されるため、これはベスト プラクティスではないかもしれないと感じています。useEffectそしてuseReducer、カスタム フックを採用しようとすると、コードが機能しなくなります。

この状況でデータを編集する最良の方法は何ですか？