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

Question

我有一个 React 应用程序，其数组格式如下:

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

我的 React 组件 中有一个方法，它使用覆盖向主题添加新项目:

  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? 的精彩讨论.