<p>Ich habe diesen Code, der viele Eingabefelder hat. Jedes Eingabefeld wird zum Ändern eines Preiswerts verwendet. Da es viele Eingabefelder gibt (3 Preise pro Bereich und 3 Preise pro Preis), habe ich useMemo für die Funktion verwendet, die den Wert des Eingabefelds aktualisiert, und um zu vermeiden, dass jedes Mal alles neu gerendert wird Ich habe auch useReducer verwendet, um zu vermeiden, dass der Code zur Steuerung des Eingabefelds zu lang wird. </p> <p>Die Eingabe von Zeichen (oder Zahlen) wird jedoch nicht sofort angezeigt, sondern es dauert eine kurze Zeit, bis sie angezeigt werden, ganz zu schweigen von einer kontinuierlichen Eingabe. </p> <pre class="brush:php;toolbar:false;">const handleUpdate = useMemo( () => (property, valu, obid) => Dispatch({ Typ: "UPDATE_DATA", Eigenschaft, Nutzlast: Wert, ID: obid }); }, [versenden] );</pre> <p>Und es gibt auch einen Reduzierer:</p> <pre class="brush:php;toolbar:false;">function Reducer(state, action) { switch (action.type) { ... Fall „UPDATE_DATA“: zurückkehren { ...Zustand, Daten: state.data.map((item) => { if (item.id === action.id) { return { ...item, [action.property]: action.payload }; } Artikel zurückgeben; }), }; } }</pre> <p>Ich empfehle, den gesamten Code zu überprüfen, da das Problem (oder die Lösung) möglicherweise woanders liegt. Um den gesamten Code zu sehen, können Sie auf diesen Sandcodebox-Link verweisen. Bitte verzeihen Sie mir, dass ich einen Teil des Codes kopiert habe, was zu einem schlechten CSS-Format geführt hat. Beachten Sie, dass die Abruffunktion durch ein langes Array simulierter Daten ersetzt wurde. </p> <p>Link: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js</p>