0
441
VistasAdvertencia: este evento sintético se reutiliza por razones de rendimiento que suceden con <input type="checkbox" />
He estado trabajando en un ejemplo simple de reacción-redux todo para una clase y encontré varios mensajes de advertencia que se muestran en la consola cada vez que marco y desmarco una entrada de casilla de verificación.
Puedes ver las advertencias en las siguientes imágenes.
También hice una búsqueda en Google del mensaje de advertencia, pero no pude encontrar ninguna solución que funcione. Además, lo que me llamó la atención fue que parece que estaba tratando de acceder a todas las propiedades del evento nativo y del elemento DOM.
Este es el código para el componente de presentación que tiene la casilla de verificación de entrada
class TodoItem extends React.Component { state = { isChecked: false }; handleCheckbox = () => { this.setState({ isChecked: !this.state.isChecked }); }; render() { const { todos, onItemClick } = this.props; const { isChecked } = this.state; return ( <div> <ul> {todos.map((todo, id) => { return ( <li key={id} onClick={onItemClick}> <input onChange={this.handleCheckbox} type="checkbox" checked={isChecked} /> <label> <span /> {todo.textInput} </label> </li> ); })} </ul> </div> ); } } export default TodoItem;También subí el ejemplo en CodeSandbox: https://codesandbox.io/s/k0mlxk1yqv
Si desea replicar este error, debe agregar un elemento a la lista de tareas pendientes y hacer clic en la casilla de verificación para marcar y desmarcar un par de veces.
Si alguien tiene alguna idea de por qué siguen apareciendo estas señales de advertencia y cómo desactivarlas, agradecería mucho su opinión :)
3 Respuestas
Responde la pregunta0
Esto sucedió porque el event pasado implícitamente a onItemClick se usa en un contexto asíncrono.
Como dijo Andre Lemay, debe asignar sus necesidades a las variables locales y hacer referencia a ellas.
En mi caso, tenía este código:
handleInput = e => { // <-- e = synthetic event this.setState(state => ({ // <-- asynchronous call data: { ...state.data, [e.target.name]: e.target.value // <-- this was causing the warnings (e.target is in an asynchronous context) } })); };Luego lo cambié a:
handleInput = e => { const { name, value } = e.target; // <-- moved outside asynchronous context this.setState(state => ({ data: { ...state.data, [name]: value } })); };0
Sugeriría probar dos soluciones:
primer cambio
onChange={this.handleCheckbox}para
onChange={() => this.handleCheckbox()} Si eso no funciona, en 'handleCheckbox' agregue event.persist(); Me gusta esto:
handleCheckbox = (event) => { event.persist(); this.setState({ isChecked: !this.state.isChecked }); };0
Esto puede ser un poco tarde, pero me encontré con el mismo problema y lo resolví de una manera que creo que podría ser mejor que la respuesta de Adam Orlov. No creo que ninguna de las respuestas sea directamente aplicable a la pregunta formulada, pero esto surge cuando se busca en Google sobre eventos sintéticos y casillas de verificación, por lo que es un lugar tan bueno como cualquier otro ...
Creo que Adam tiene razón en su creencia de que React esencialmente borrará todas las propiedades del objeto SyntheticEvent (lo cual tiene sentido, ya que React nos dice que está reutilizando el objeto).
Sin embargo, a menos que necesite todo el objeto, no creo que llamar a event.persist() sea la mejor solución, ya que, según la documentación , eliminará el objeto del grupo (presumiblemente lo pusieron allí por una buena razón) .
Si desea acceder a las propiedades del evento de forma asincrónica, debe llamar a event.persist() en el evento, lo que eliminará el evento sintético del grupo y permitirá que el código de usuario conserve las referencias al evento.
En lugar de hacer esto, si solo necesita uno o dos valores del objeto de evento, puede asignarlos a variables locales y luego hacer referencia a las variables locales dentro de su propia función, así:
<input type="checkbox" onChange={(event) => { let checked = event.currentTarget.checked; //store whatever values we need from from the event here this._someOtherFunction(checked) } />De esta manera, no tiene que reestructurar su código de ninguna manera para evitar hacer algo asíncrono que dependa de los datos de eventos, y tampoco tiene que preocuparse por los posibles impactos en el rendimiento, ya que permite que React haga lo que quiera con el grupo de eventos.