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

当我修改函数中的对象时，我得到了一个奇怪的结果，有趣的是，当我在浏览器控制台中执行相同的操作时，我得到了我所期望的结果，但在反应中它似乎不起作用
这是代码

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"}

这是一个工作示例，请查看控制台以查看结果： https://codesandbox.io/s/serene-elbakyan-dt1nb?fontsize=14

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

Example:

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

  return i;
};

Or

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

  return result;
};

Or

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

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

See the spread (...)句法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax