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;

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

state.data对象/数组中可能使用了相同的引用（99,99％）-这样，“理论上本地”的突变会影响“幕后”的状态。

它看起来不可读，但没有魔术-javascript就是这种方式。

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

在React.js中如何解构数组更新状态的语法

1 个答案: