reactjs - TypeError: evt.target es nulo en setState funcional
(2)
Estas son dos sintaxis diferentes para setState
Primero:
handleOnChange(evt) {
this.setState(() => ({
tickerName: evt.target.value
}));
}
usa la función de actualización como primer argumento.
Segundo:
handleOnChange(evt) {
this.setState({ tickerName: evt.target.value });
}
usa el objeto para ser actualizado
Al usar el evento sintético en la función de actualización, debe usar
event.persist()
De la documentation :
el SyntheticEvent se agrupa. Esto significa que el objeto SyntheticEvent se reutilizará y todas las propiedades se anularán después de que se haya invocado la devolución de llamada del evento. Esto es por razones de rendimiento. Como tal, no puede acceder al evento de forma asincrónica.
Si desea acceder a las propiedades del evento de forma asincrónica, debe llamar a event.persist () en el evento, que eliminará el evento sintético del grupo y permitirá que el código de usuario conserve las referencias al evento.
Tu primer caso se vería así
handleOnChange(evt) {
evt.persist();
this.setState(() => ({
tickerName: evt.target.value
}));
}
O en lugar de usar
event.persist()
, puede almacenar el evento en otro objeto
handleOnChange(evt) {
const value = evt.target.value;
this.setState(() => ({
tickerName: evt.target.value
}));
}
PD
: debe usar la función de actualización para setState solo cuando desee actualizar el estado actual en función de
prevState
o
props
¿Cuál es la principal diferencia entre estas dos funciones?
handleOnChange(evt) {
this.setState(() => ({
tickerName: evt.target.value
}));
}
handleOnChange(evt) {
this.setState({ tickerName: evt.target.value });
}
¿Y por qué con la función handleOnChange () que cambia el estado directamente, esto funciona bien?
<input
type="text"
value={this.state.tickerName}
onChange={(evt) => this.handleOnChange(evt)}
/>
Cuando uso la primera función que cambia el estado con una devolución de llamada, aparece este error:
TypeError: evt.target is null
React
ajusta los eventos en su propio
SyntheticEvent
que
will be reused and all properties will be nullified after the event callback has been invoked
(ver
documentation
).
Según
documentation
, no se puede acceder a reaccionar
SyntheticEvent
de forma asincrónica y
setState
es asíncrono.
Entonces, cuando se ejecuta
setState
su
evt
puede ser nulo porque se reutiliza al
react
.
Dado que la primera función usa una devolución de llamada con acceso al estado anterior en
setState
, para cuando se ejecuta la devolución de llamada, el evento
evt
se reutiliza y se anula por
react
.
En el segundo caso, el objeto de actualización con el valor del evento se crea de inmediato y se pasa directamente y no crea un problema similar.
Si necesita usar
setState
con una devolución de llamada, debe
setState
de que el evento posiblemente sea nulo cuando se ejecuta la devolución de llamada.
Una forma de lidiar con esto sería almacenar la referencia original al
target
fuera de
setState
que se
setState
y usará dentro de
setState
.
Me gusta esto:
handleOnChange(evt) {
const target = evt.target;
this.setState((prevState) => ({
tickerName: target.value
}));
}
Escribí una respuesta más detallada sobre por qué los eventos de
react
se vuelven nulos en
setState
here
.