React redux-strange 行为，prevState 和 newState 一起改变

Question

我开始做一些前端项目，我需要打基础，我选择了 react 和 redux。我浏览了一些教程并开始构建我的项目。

一切正常，但突然间我陷入了一个问题，我什至不知道如何描述它。

问题与使用redux、reducers有关。

简而言之，我的 prevState 正在随着 newState 发生变化。最糟糕的是我不能分享更多信息，我是这个 react/redux 的新手，所以我什至不确定这是否可能。 下面是示例代码：

export default function (state: UserReducerState = initialState, action: Action): any {
    const newState = Object.assign({}, state);
    console.log(state);
    state.loginStatus.username="This change should only be on prevState";
    console.log("newState",newState);
    return newState;
  };

当我使用 console.log(newState) 时，即使 newState 在 state.loginStatus.username ="This change......." 之前被复制，它也会从旧状态发生变化 我不知道我应该展示更多的代码，但我认为这就是问题的开始。

被复制的对象怎么可能对旧对象有引用？

Answer 1

问题

即使您正在复制状态对象，它也不是 deep 副本。由于新状态只是持有对它们的引用，因此您正在改变先前状态对象的更深嵌套的属性。

state.loginStatus.username = "This change should only be on prevState";

newState 是一个新对象，但newState.loginStatus.username 是对前一个状态保持的同一对象的引用。

解决方案

我不知道你为什么要在 reducer 中改变你的旧状态对象，但是当更新新状态中嵌套更深的属性时，你必须浅拷贝 any em> 正在更新的嵌套状态。通常这是通过扩展语法实现的。

export default function (state: UserReducerState = initialState, action: Action): any {
  const newState = {
    ...state,
    loginStatus: {
      ...state.loginStatus,
      username: "This change should only be on newState".
    },
  };
  console.log(state);
  console.log("newState", newState);
  return newState;
};