Esta reseña fue aprobado por expertos así se asegura la exactitud de nuestra esta noticia.
Solución:
Lo que te dice eslint con el react/destructuring-assignments error es que asignaciones como:
const data = this.state.data;
se puede reescribir en:
const data = this.state;
Esto también funciona para argumentos de funciones, así que:
onChange = e => ...
Se puede escribir como
onChange = (target: value, name) => ...
El siguiente error de react/no-access-state-in-setstate te dice que estas escribiendo:
this.setState(
data: ...this.state.data, [e.target.name]: e.target.value
);
cuando deberías estar escribiendo:
this.setState(prevState => (
data: ...prevState.data, [e.target.name]: e.target.value
));
o, si lo combinas con el react/destructuring-assignments regla:
onChange = (target: name, value) =>
this.setState(prevState => (
data: ...prevState.data, [name]: value
));
Puedes leer más sobre esas dos reglas aquí:
reaccionar/desestructurar-asignación
reaccionar/no-acceso-estado-en-setstate
La desestructuración es básicamente azúcar sintático Algunas configuraciones de Eslint lo prefieren (que supongo que es su caso).
Básicamente, se trata de declarar los valores y hacerlos iguales a la parte de la sintaxis que no desea repetir, para Ex, dados los accesorios de reacción:
this.props.house, this.props.dog, this.props.car
desestructurado —>
const house, dog, car = this.props;
Así que ahora puedes usar casa, perro o lo que quieras.
Se usa comúnmente con estados y accesorios en reaccionar., aquí hay más documentos al respecto, espero que ayude. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Si te sientes a gusto, eres capaz de dejar una reseña acerca de qué le añadirías a esta división.