問題タブ [use-reducer]

私の減速機：

私のApp.js:

App.js では、2 番目の useEffect が呼び出された後、状態が更新され、ユーザーが promise を返します。promise には複数のプロパティがあり、そのうちの 1 つに、返されるはずだった正しい状態があります。状態を返すべきではありませんか？私は何か間違ったことをしていますか？

手短に：

1) アプリ起動

2) useEffect が初めて呼び出され、正しい初期状態になっている

3) 状態を更新する LOAD アクションを呼び出します

4) useEffect が 2 回目に呼び出されます。今回は promise を返しますが、ストアの更新された状態のみを返す必要があるのではないでしょうか?

totalAmountアプリでの表示に問題があります。2 回のレンダリングのため、間違った値が表示されます。そのために useMemo フックを使用しようとしています。

これはどのように見えるかです（cssを気にしないでください:D）

したがって、次のように数えます。

7.99 * 2 + 4.99 = 20.97

最後に追加されたアイテム -44.99カウントされていませんtotalAmount

22回レンダリングするため、最初のアイテムを乗算します。

そして、ここに私のコード サンドボックスがあります: https://codesandbox.io/s/objective-kare-805kc?file=/src/components/App.tsx

useReducer私の目標は、フックを使用して React 制御の入力を実装することです。

レデューサー内では、現在の値とキャレット位置を取得するためにevent.target.valueandが必要です。そのため、アクションのとしてevent.target.selectionStartを送信することを考えました。eventpayloadON_CHANGE

これは私がしようとしているものです:

https://codesandbox.io/s/optimistic-edison-xypvn

入力された最初の文字には機能しますが、2番目に壊れます。

これはエラーです：

警告: この合成イベントは、パフォーマンス上の理由から再利用されます。targetこれが表示されている場合は、リリースされた/無効化された合成イベントでプロパティにアクセスしています。これは null に設定されます。元の合成イベントを維持する必要がある場合は、event.persist() を使用します。詳細については、を参照react-event-poolingしてください。

私は何をすべきか？どこに電話する必要がありますかevent.persist()。で行う必要がありますか、またはハンドラーreducer内でパラメーターとして送信する前に行う必要があります。onChange()

eventまたは、オブジェクト全体を送信するのではなく、これらのプロパティのみを送信する方がよいでしょうか?

お気に入り：

以下のスニペットを参照してください。

これを行うことにより：

レンダリングごとにgetInitialState2()used inを実行することを避けます。useState

useReducerしかし、それはフックでは機能しないようです。

質問

すべてのレンダーでフックのinitialStateパラメーターで使用される関数の実行を回避する方法はありますか?useReducer

{ useReducer } を使用してフォームの状態を管理しています。しかし、私は2つの別々のハンドラーを持っています

1. handleChange() = 入力の変更(これは期待どおりに機能します)

2. UploadFile() = 画像のアップロード用(これは画像/状態を更新しません)

UploadFile() で画像の状態を更新できませんでした。何が間違っているのかわかりません。以下は完全なコード全体です。