如何在react.js中使用这种去构造更新状态的语法

Question

我正在经历一个react.js代码，在那里我遇到了解构数组语法真的很混乱。

我评论了作者的帖子，但没有得到任何回应。

case Actions.AC_UPDATE_TASK:
  item = action.payload.item;
  props = action.payload.props;
  item.start = props.start ? props.start : item.start;
  item.end = props.end ? props.end : item.end;
  item.name = props.name ? props.name : item.name;
  return {
    data: [...state.data],
    links: [...state.links],
    selectedItem: state.selectedItem
  };

这里项目和道具作为参数出现，项目存在于数据数组中。在从道具操作项目之后，这个项目需要在数据数组中更新，但是在操作它之后它在数据数组中没有更新。但在解构语法后，我可以在数据数组中看到更新的项目。这怎么可能？

Answer 1

这不是反应或解构相关的影响 - 它只是直接突变的结果。

在这个地方你要复制对象的引用：

item = action.payload.item;

更改/突变不是在本地副本上完成，而是在传递的对象上（通过引用）完成。

可能（99,99％）在state.data对象/数组中使用相同的引用 - 这种方式'理论上局部'突变影响场景后面的状态'。

它看起来像不可读但没有魔法 - javascript只是这样工作。

如果不需要直接变异 - 您可以使用一种不可变技术来避免这种副作用。在最简单的情况下，始终对新创建的对象和复制（深度克隆）属性进行操作。