Saltar al contenido

Desestructuración de estado/accesorios en React

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *