Das synthetische Ereignis wird nach einem asynchronen Vorgang veraltet ⇐ HTML

[Anonymous]

Ich habe ein Problem mit einem TextField, bei dem e.target.value
nach einem asynchronen Vorgang (FileReader-API) im onChange-Handler veraltet ist.
Wenn ich e.target.value vor dem asynchronen Vorgang in einer Variablen erfasse und
diese Variable verwende, um den Status zu aktualisieren, funktioniert alles einwandfrei. Wenn ich jedoch versuche,
auf e.target.value zuzugreifen, nachdem der asynchrone Vorgang abgeschlossen ist, enthält es immer
den alten Wert anstelle des aktuellen Eingabewerts.
Warum verliert e.target.value nach einem asynchronen Vorgang seinen aktuellen Wert und
warum löst das vorherige Speichern in einer Variablen das Problem?
React-Version 19.0.0

Code: Select all

import React from 'react';

export default function BasicCard() {

const [a, setA] = React.useState("place");

return  {
const value = e.target.value; // Storing in variable - WORKS
await new Promise((resolve) => { resolve(true) }); // FileReader API

console.log(2, e.target.value); // This logs the OLD value, not current

// setA(e.target.value); // This DOESN'T work - uses stale value
setA(value); // This WORKS - uses captured value
}}
/>
}

export function App(props) {
return (



)
}

Erwartet: e.target.value sollte auch nach
dem asynchronen Vorgang den aktuellen Eingabewert enthalten.
Tatsächlich: e.target.value kehrt nach Abschluss des asynchronen Vorgangs zum vorherigen Wert zurück, was dazu führt, dass die Statusaktualisierung fehlschlägt.
Problemumgehung: Erfassen von e.target.value in einer Konstante vor dem Der asynchrone Vorgang funktioniert
korrekt.
Bearbeiten:
Schritte zum Reproduzieren:
Fügen Sie den obigen Code in https://playcode.io/mui ein
oder
minimal reproduzierbares Beispiel hier https://stackblitz.com/edit/vitejs-vite ... %2FApp.tsx
PS: verzögerte Eingaben können für eine bessere UX verwendet werden, es gibt definitiv bessere Möglichkeiten, damit umzugehen, aber ich bin nur neugierig, warum das passiert