<p>このコードには多くの入力ボックスがあり、各入力ボックスは価格値を変更するために使用されます。 入力ボックスが多数あるため (エリアごとの価格が 3 つ、価格ごとの価格が 3 つ)、毎回すべてを再レンダリングするのを避けるために、入力ボックスの値を更新する関数で useMemo を使用しました。コードが長すぎて入力ボックスを制御できないことを避けるために useReducer も使用しました。 </p> <p>ただし、文字（または数字）を入力すると、すぐに表示されるわけではなく、表示されるまでに時間がかかりますし、ましてや連続入力する場合も同様です。 </p> <pre class="brush:php;toolbar:false;">const handleUpdate = useMemo( () => (プロパティ、値、obid) => { dispatch({ タイプ: "UPDATE_DATA", プロパティ, ペイロード: 値, ID: obid }); }、 [急送] );</pre> <p>そして、リデューサーもあります:</p> <pre class="brush:php;toolbar:false;">function raiser(state, action) { スイッチ (アクション.タイプ) { ... ケース「UPDATE_DATA」: 戻る { ...州、 データ: state.data.map((item) => { if (アイテム.id === アクション.id) { return { ...item, [action.property]: action.payload }; } 返却物; })、 }; } }</pre> <p>問題 (または解決策) が別の場所にある可能性があるため、コード全体を確認することをお勧めします。コード全体を表示するには、このサンドコードボックスのリンクを参照してください。コードの一部をコピーしたため、CSS 形式が悪くなったことをお許しください。 フェッチ関数がシミュレートされたデータの長い配列に置き換えられていることに注意してください。 </p> <p>リンク: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js</p>