javascript - 修改函数中的对象时出现意外结果

Question

当我在一个函数中修改一个对象时，我得到了一个奇怪的结果，有趣的是，当我在浏览器控制台中做同样的事情时，我得到了我所期望的，但在 react 中它似乎没有工作
这是代码

const makeChanges = i => {
  i.foo = "test";
  i["new"] = "i am new";

  return i;
};

function App() {
  var A = {
    foo: "foo",
    bar: "bar"
  };

  console.log(A);

  A = makeChanges(A);

  console.log(A);
  //the render code...
}

当前结果:

Object {foo: "test", bar: "bar", new: "i am new"}
Object {foo: "test", bar: "bar", new: "i am new"}

预期结果:

Object {foo: "foo", bar: "bar"}
Object {foo: "test", bar: "bar", new: "i am new"}

Here is a working example, please look at the console to see the result:

Answer 1

问题是您修改了指向原始对象A 的i。要解决它，只需“克隆”i:

例子:

const makeChanges = ({ ...i }) => {
  i.foo = "test";
  i["new"] = "i am new";

  return i;
};

或者

const makeChanges = (i) => {
  const result = { ...i };
  // or
  // const result = Object.assign({}, i);
  result.foo = "test";
  result["new"] = "i am new";

  return result;
};

或者

const makeChanges = (i) => {
  return { ...i, foo: "test", "new": "i am new" } ;
};

工作示例:https://codesandbox.io/s/blue-wave-mhnpp

参见 spread (...) 语法:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax