Espero que todos ustedes esten bien. Esta pregunta es solo para mejorar mis códigos en React, que actualmente se ve muy sucio e ilegible. Tengo un campo de 10-15 formularios que se actualizó una vez que obtuve valores de las API.

Aquí está el código desde el que hice esto,

            this.setState({smtpServer:res.data.data[0].smtpServer});
            this.setState({senderName:res.data.data[0].senderName});
            this.setState({senderEmail:res.data.data[0].senderEmail});
            this.setState({smtpPorts:res.data.data[0].smtpPort});
            this.setState({username:res.data.data[0].username});
            this.setState({password:res.data.data[0].password});
            this.setState({authType:res.data.data[0].authType});

También hay muchos más métodos setState que no agregué. Esto hace que mi código de componente sea complejo. ¿Hay algún método para acortar estos códigos?

0
Pranay kumar 28 may. 2020 a las 09:35

5 respuestas

La mejor respuesta

Puede acortarlos ajustando todo en un solo estado de objeto usando setState. Primero intente desestructurar su objeto res.data.data[0] para manejar mejor los atributos individuales:

const { smptServer, 
        senderName, 
        senderEmail, 
        smtpPort,
        username, 
        password, 
        authType} = res.data.data[0];

A continuación, puede establecer el estado en un OBJETO GIGANTE con cada atributo. ES6 permite que javascript use la clave solo en lugar de pares clave-valor cuando la clave y el valor tienen el mismo nombre. Por lo tanto: const objName = {username:username, password:password} también se puede escribir como const objName = {username,password} Según esa lógica, solo puede establecer State como:

this.setState({ smptServer, 
        senderName, 
        senderEmail, 
        smtpPort,
        username, 
        password, 
        authType});

Espero que esto ayude.

0
Rahul Pillai 28 may. 2020 a las 06:48

Se puede lograr de una manera muy simple como a continuación:

  1. Puede tomar esos datos en una variable y luego puede asignarlos en el estado.

    const data = res.data.data[0];

    this.setState({...data});

  2. Puede asignarlo directamente sin el uso de una variable adicional.

    this.setState({...res.data.data[0]});

0
Savan 28 may. 2020 a las 16:51

Puede desestructurar los datos y usar un solo setState con asignación de objetos abreviados ( es decir, las claves se nombran igual que las variables )

const {
  smtpServer,
  senderName,
  senderEmail,
  smtpPort,
  username,
  password,
  authType
} = res.data.data[0];

this.setState({
  smtpServer,
  senderName,
  senderEmail,
  smtpPort,
  username,
  password,
  authType
});

O, si res.data.data[0] tiene todas las propiedades que desea almacenar en estado, más sucintamente

this.setState({...res.data.data[0]});

Edit result spread into state updater

1
Drew Reese 28 may. 2020 a las 16:29

O si no hay nada más en ese objeto, simplemente podría hacer

this.setState(res.data.data[0]);

O

this.setState({ data: res.data.data[0] });
0
Krzysztof Golasik 28 may. 2020 a las 07:31

Suponiendo que estas llamadas se realicen en secuencia, podría escribirse como

const data = res.data.data[0];
this.setState({
  smtpServer: data.smtpServer,
  senderName: data.senderName,
  senderEmail: data.senderEmail,
  smtpPorts: data.smtpPort,
  username: data.username,
  password: data.password,
  authType: data.authType
});
0
jvgaeta 28 may. 2020 a las 06:43