Dies ist eine Problemumgehung, wenn "Status" im Ereignis-Listener der Funktionskomponente nicht korrekt behandelt werden kann.
Wenn Sie versuchen, den Status von "React.useState ()" in der Rückruffunktion des Ereignis-Listeners zu referenzieren, ist der Wert möglicherweise nicht aktuell.
Funktionskomponente
// ①
const [counter, setCounter] = React.useState(0);
// ④
const func = () => {
console.log(counter);
};
// ③
React.useEffect(() => {
window.addEventListener("click", func);
}, []);
// ②
return (
<button onClick={() => setCounter(counter + 1)}>
Taste
</button>
** In diesem Beispiel ist der von ④ console.log (counter) ausgegebene Wert immer 0. ** ** **
Sie ist zum Zeitpunkt der Registrierung des Ereignis-Listeners auf den Wert "Zähler" festgelegt, und die Ausgabe ändert sich auch dann nicht, wenn der Status aktualisiert wird.
Ich weiß nicht, wie oft ich darauf geklickt habe ...
useRef ()Sie können jederzeit mit "React.useRef ()" auf den neuesten Status verweisen.
Beispiele, die funktionieren
const [counter, setCounter] = React.useState(0);
//hinzufügen
const counterRef = useRef(); //Ref-Objekt erstellen
counterRef.current = counter; //ref bezieht sich auf Zähler
const func = () => {
//Ausgabe ref
console.log(counterRef.current);
};
// -----Das Folgende ist unverändert-----
React.useEffect(() => {
window.addEventListener("click", func);
}, []);
return (
<button onClick={() => setCounter(counter + 1)}>
Taste
</button>
Verwenden Sie anstelle von "counter" im Rückruf "counterRef.current". Auf diese Weise können Sie auf den neuesten Status verweisen.
Wenn der letzte "Status" im Ereignis-Listener der Funktionskomponente nicht sichtbar ist, verwenden Sie "Ref", um auf "Status" zu verweisen, anstatt "Status" im Rückruf zu verwenden.
Auf diese Weise können Sie auf den neuesten Status verweisen.
Recommended Posts