reactjs - 在 redux 状态上使用 concat 仍然会修改状态

Question

我正在尝试修改某些状态以使它们以不同方式显示，但我似乎无法修改它而不会收到错误提示我不要改变状态。我曾尝试使用 .concat、.slice 和扩展运算符来复制状态数组，但它似乎不起作用。

const { cart, totalCartPrice, totalItemsInCart } = useSelector(
    (state) => state
  );

  const cartHandler = () => {
    const copyCart = cart.concat();
    copyCart[0].name = "New Name"
    setDisplayCart(copyCart)
  };

这样做不一定会引发错误，但会改变状态。如果我使用我设置的按钮发送一个 Action ，它会抛出一个关于状态被改变的错误。

Answer 1

• 当你使用 useSelector 这个 returns the exact reference that you return, which normally means it's the exact same reference that's in the store state.
• 当您使用 concat 时，这将返回串联数组的浅拷贝

如果你完全想在不改变状态的情况下改变这个对象:

    const copyCart = {...cart[0]};
    copyCart.name = "New Name"

• 如果你想保持这个状态，这部分应该在一个reducer中
• 如果你想从状态中导出这个值，这应该在选择器中完成

使用 redux 更新状态

此外，最好在 reducer 中执行此操作，因为您似乎希望将此更改保留在状态中。

如果您将 redux-toolkit 与 immer 一起使用，this is the only place where it's safe to "mutate" the state

createReducer(0, {
  changeName: (state, action: PayloadAction<string>) => {
    state.cart[0].name = action.payload
  },
})

然后你可以像这样使用它:

dispatch(changeName("New Name"));