缩短反应中的多行setState代码

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

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

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

Answer 2

您可以解构数据并使用单个 setState 和 shorthand 对象赋值（即键的名称与变量相同）

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 3

您可以使用 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} 按照这种逻辑，您可以将 setState 设置为：

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

希望对您有所帮助。

Answer 4

或者如果那个对象中没有其他东西，你可以简单地做

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

或

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

Answer 5

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

您可以将该数据放入一个变量中，然后在状态中对其进行赋值。

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

this.setState({...data});
你可以直接赋值，不需要使用额外的变量。

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

缩短反应中的多行setState代码

Shorten multiple lines of setState code in react

reactjs

typescript

react-state-management