缩短反应中的多行 setState 代码答案

【问题标题】：Shorten multiple lines of setState code in react缩短反应中的多行 setState 代码
【发布时间】：2020-09-15 09:34:37
【问题描述】：

这个问题只是为了改进我在 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 方法。这使我的组件代码变得复杂。有什么方法可以缩短这些代码。

【问题讨论】：

感谢您一直关注我。我会问这是各自的频道。

标签： reactjs typescript react-state-management

【解决方案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]});

【讨论】：

【解决方案2】：

您可以通过使用 setState 将它们全部放入单个对象状态来缩短它们。首先尝试解构您的 res.data.data[0] 对象，以便更好地处理各个属性：

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

接下来，您可以使用每个属性在一个 GIANT OBJECT 中设置状态。当键和值具有相同名称时，ES6 允许 javascript 仅使用键而不是键值对。因此：const objName = {username:username, password:password} 也可以输入为 const objName = {username,password} 按照这种逻辑，您可以将State 设置为：

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

假设这些调用是按顺序发生的，它可以写成

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

【讨论】：

【解决方案4】：

或者，如果该对象中没有其他内容，您可以简单地做

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

或

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

【讨论】：

【解决方案5】：

可以通过以下非常简单的方式实现：

您可以将这些数据放入一个变量中，然后您可以在状态中分配它。

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

this.setState({...data});
您可以直接分配它而无需使用额外的变量。

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

【讨论】：