Сократите несколько строк кода setState в React

Question

Этот вопрос предназначен только для улучшения моих кодов в React, которые в настоящее время выглядят очень грязными и нечитаемыми. У меня есть 10-15 полей форм, которые обновляются, когда я получаю значения из API.

Вот код, из которого я это сделал,

            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});

Есть также много других методов setState, которые Я не добавил. Это усложняет код моего компонента. Есть ли способ сократить эти коды.

Answer 1

Вы можете деструктурировать данные и использовать один setState с сокращенным назначением объекта ( т.е. ключи названы так же, как переменные )

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

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

Или, если res.data.data[0] имеет все свойства, которые вы хотите сохранить в состоянии, более кратко

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

Answer 2

Это может быть достигнуто очень простым способом, как показано ниже:

1. Вы можете взять эти данные в одну переменную, а затем назначить их в состоянии.

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

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

2. Вы можете назначить его напрямую без использования дополнительной переменной.

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

Answer 3

Или, если в этом объекте больше ничего нет, вы можете просто сделать

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

или

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

Answer 4

Вы можете сократить их, поместив все в одно состояние объекта с помощью setState. Сначала попробуйте деструктурировать свой res.data.data[0] объект, чтобы лучше обрабатывать отдельные атрибуты:

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

Затем вы можете установить состояние в одном ГИГАНТСКОМ ОБЪЕКТЕ с каждым атрибутом. ES6 позволяет javascript использовать только ключ вместо пар ключ-значение, когда ключ и значение имеют одинаковое имя. Таким образом: const objName = {username:username, password:password} также можно набрать как const objName = {username,password} В этом logi c вы можете просто установитьState как:

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

Надеюсь, это поможет.

Answer 5

Предполагая, что эти вызовы происходят последовательно, это можно записать как

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
});