JS / ReactJS-分配新变量会更改原始变量

Question

我有一个React App，其数组格式如下：

var themes = [
  {
    id: 1,
    name: 'Light',
  },
  {
    id: 2,
    name: 'Dark',
  }
];

我的React Component中有一个方法可以使用覆盖将新项目添加到主题：

  addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? base : themes[0];
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
  };

我遇到的问题是将newTheme变量设置为base似乎会覆盖数组中的基础对象。

因此，如果我添加一个名为Midnight的主题，那么Dark主题也会被更改吗？

Answer 1

您应该复制主题对象，因为find返回对该对象的引用。

您有2个选项-浅或深复制对象。

1。浅拷贝（使用ES6）：

const newTheme = {...base ? base : themes[0]}

2。深度复制（如果您没有函数属性）：

JSON.parse(JSON.stringify(base ? base : themes[0]))

关于-How do I correctly clone a JavaScript object?的讨论非常精彩。

Answer 2

LZString.decompress()数组方法将不会返回主题的副本，而是返回对其的引用，因此您实际上是在更改原始主题。

Answer 3

  

使用 Object.assign（）

Array.find（）方法不返回匹配值的副本，而是对象数组中实际匹配的对象。您需要复制该返回的主题对象，以创建要添加的新主题。 Object.assign({}, obj)返回obj对象的克隆（请注意，但不要进行深度克隆）。

addTheme = (theme) => {
    const base = themes.find(t => t.name.toLowerCase() === theme.base.toLowerCase());
    var newTheme = base ? Object.assign({},base) : Object.assign({},themes[0]);
    console.log(newTheme);
    newTheme.id = themes[themes.length - 1].id + 1;
    newTheme.name = theme.name;
    themes.push(newTheme);
    console.log('themes:', themes);
};