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

2j4z5cfb  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(143)

我试图修改一些状态以使它们以不同的方式显示,但我似乎无法修改它而不出现一个错误,告诉我不要改变状态。我尝试使用.concat、.slice和spread操作符来复制状态数组,但似乎不起作用。

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

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

这样做不一定会抛出一个错误,但它会改变状态。如果我用我设置的按钮调度一个操作,它会抛出一个关于状态被改变的错误。

xfb7svmp

xfb7svmp1#

  • 当你使用useSelector时,它会返回你所返回的引用,这通常意味着它与存储状态中的引用完全相同。
  • 当使用concat时,这将返回连接数组的浅层副本

如果您完全希望更改此对象而不改变状态:

const copyCart = {...cart[0]};
    copyCart.name = "New Name"
  • 如果要保持此状态,此部分应在减速机
  • 如果要从状态派生此值,则应在选择器中执行此操作

使用redux更新状态

此外,这是更好地做到这一点内的减速器,因为它似乎你想保持这种变化的状态。
如果您正在使用redux-toolkit和immer,这是唯一可以安全地“改变”状态的地方

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

然后,您可以这样使用它:

dispatch(changeName("New Name"));

相关问题