Javascript 反应嵌套对象数组内部对象以某种方式链接到所有对象元素

我有一个嵌套的对象，它以某种方式保留了到profile对象的链接。每次调用myMethod并对userObj进行更改时，这些更改都会反映在嵌套对象的所有元素中。例如，allProfiles['a']和allProfiles['b']对于allProfiles[]].userObj属性具有相同的值。这只发生在userObj数据上，一切都按预期进行。以下代码段重复了该问题

import React from 'react';
import { ReactDOM, render } from 'react-dom';

export const userProfile = {
  address1: { label: "Local", data: null },
  address2: { label: "World", data: null },
};

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      profiles: {}
    };
    this.addProfile = this.addProfile.bind(this);
  }

  addProfile() {
    const { counter, profiles } = this.state;
    let new_user = Object.assign({}, userProfile);
    new_user.address1.data = counter * 5;
    const profile_id = 1;
    const user_id = counter;

    const new_profile = {};
    const show = true;
    new_profile[profile_id] = { show };
    new_profile[profile_id] = new_user;
    profiles[user_id] = new_profile;
    this.setState({ counter: user_id + 1, profiles });
  }

  render() {
    const profile_id = 1;
    const ctr = this.state.counter;
    return (
      <div>
        <div><button onClick={this.addProfile}>add profile</button></div>
        <div>profile 0 data:
          {ctr > 0 ? this.state.profiles[0][profile_id].address1.data : null}</div>
        <div>profile {ctr} data:
          {ctr > 0 ? this.state.profiles[ctr - 1][profile_id].address1.data : null}</div>
      </div>
    );
  }
}
export default (Toggle);
render(<Toggle />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入{ReactDOM，render}；
导出常量用户配置文件={
地址1:{label:“Local”，数据：null}，
地址2:{标签：“世界”，数据：null}，
};
类切换扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
柜台:0,，
配置文件：{}
};
this.addProfile=this.addProfile.bind（this）；
}
addProfile（）{
const{counter，profiles}=this.state；
让new_user=Object.assign（{}，userProfile）；
new_user.address1.data=计数器*5；
const profile_id=1；
const user_id=计数器；
const new_profile={}；
const show=true；
新的配置文件[profile\u id]={show}；
新用户配置文件[配置文件id]=新用户；
配置文件[用户\u id]=新的\u配置文件；
this.setState（{counter:user_id+1，profiles}）；
}
render（）{
const profile_id=1；
const ctr=this.state.counter；
返回(
添加配置文件
配置文件0数据：
{ctr>0？this.state.profiles[0][profile\u id].address1.data:null}
配置文件{ctr}数据：
{ctr>0？this.state.profiles[ctr-1][profile_id].address1.data:null}
);
}
}
导出默认值（切换）；
render（，document.getElementById（'root'））；

对象。分配（{}，userProfile）

只创建

userProfile

的一个浅拷贝，这意味着

新用户。address1

和

userProfile.address1

仍在引用同一对象

要正确克隆

address1

和

address2

对象，需要执行以下操作

const new_user = Object.entries(userProfile).reduce((acc, [key, value]) => {
  acc[key] = { ...value }; // create a shallow copy of the nested object
  return acc;
}, {});

---

这应该可以解决你的问题，但是你的代码中有很多奇怪的事情，比如连续分配

新的\u profile[profile\u id]

。

你能发布完整的（可编译的）代码吗？我添加了一个重复发布的代码片段。昨天我试过使用cloneDeep，但没有发现任何区别。然而，在这个例子中尝试了它，它解决了这个问题。“奇怪”的代码主要是我试图简化实际代码来创建这个示例。