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

这让我发疯-我有一个供用户更新帐户信息的表格,当用户更新任何输入内容时,我想显示“记住完成后保存”的通知。为此,我将“ 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在这里得到更新?

zhaoyue1984 回答:为什么在状态下更新一个对象会同时更新两个对象?

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

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

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

let user = {...this.state.user};
user[input] = val;
this.setState({user: user});
本文链接:https://www.f2er.com/3135911.html

大家都在问