reactjs - TypeError: evt.target es nulo en setState funcional

Question

¿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

Answer 1

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

CodeSandbox

Answer 2

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 .