Question

这让我发疯-我有一个供用户更新帐户信息的表格，当用户更新任何输入内容时，我想显示“记住完成后保存”的通知。为此，我将“ user”对象存储在状态下，并将“ originalUser”对象存储在状态下。但是，当我更新“用户”对象时，它也会同时更新“原始用户”对象！

简化代码：

我从数据库中获取用户详细信息，并设置状态：

this.setState({loaded: true, user: data.user, originalUser: data.user});

然后我要对其状态进行任何更新的唯一位置是此功能：

onInputChange = (input, val) => {
   let user = this.state.user;
   user[input] = val;
   this.setState({user: user});
    console.log(this.state.user);
    console.log(this.state.originalUser);
}

但是控制台将更新记录到两者。例如，如果输入最初是“ first”，并且值最初是“ John”，而我将其更改为“ Johnny”，则“ user”和“ originalUser”都将“ first”设为“ Johnny”。为什么OriginalUser在这里得到更新？

Answer 1

赋值运算符不会创建对象的副本，而只会为其分配引用。如果您的对象未深层嵌套，则传播运算符将提供帮助

this.setState({loaded: true, user: {...data.user}, originalUser: {...data.user}});

也不要直接改变状态。改用它：

let user = {...this.state.user};
user[input] = val;
this.setState({user: user});

为什么在状态下更新一个对象会同时更新两个对象？

1 个答案: