亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

盡管使用傳播運算符進行狀態復制,但仍存在 Redux 狀態突變

盡管使用傳播運算符進行狀態復制,但仍存在 Redux 狀態突變

楊__羊羊 2022-09-02 21:10:59
為什么我在使用傳播運算符復制對象時收到狀態突變警報?我正在嘗試用redux制作一個購物車。當添加元素或減少其數量時,我會調度一個更新 de 狀態的操作。在我的化簡器中,如果尚未添加產品,我將返回帶有新對象的狀態數組的新副本。如果已經添加了它,我將使用map(返回一個新數組)和我正在增加的產品的副本進行迭代,并且其屬性增加。問題是此屬性 在不改變狀態的情況下更新此屬性的正確方法是什么?qty還原劑case types.ADD_TO_CART_SUCCESS:  const isAdded = state.cart.find(item => item.sku === action.product.sku);  if (!isAdded) action.product.qty = 1;  return {    ...state,    cart: !isAdded      ? [action.product, ...state.cart]      : state.cart.map(item =>          item.sku === action.product.sku            ? { ...item, qty: ++item.qty }            : item        ),  };違規警告Invariant Violation: A state mutation was detected inside a dispatch, in the path: `user.cart.0.qty`. Take a look at the reducer(s) handling the action {"type":"ADD_TO_CART_SUCCESS"....}
查看完整描述

3 回答

?
www說

TA貢獻1775條經驗 獲得超8個贊

您正在改變當前項。前/后遞減/遞減將改變它所操作的當前對象引用。


case types.ADD_TO_CART_SUCCESS:

  const isAdded = state.cart.find(item => item.sku === action.product.sku);

  if (!isAdded) action.product.qty = 1;

  return {

    ...state,

    cart: !isAdded

      ? [action.product, ...state.cart]

      : state.cart.map(item =>

          item.sku === action.product.sku

            ? { ...item, qty: ++item.qty } // <-- This mutates the current item.qty

            : item

        ),

  };

但是,您可以返回遞增的值,當前item.qty + 1


case types.ADD_TO_CART_SUCCESS:

  const isAdded = state.cart.find(item => item.sku === action.product.sku);

  if (!isAdded) action.product.qty = 1;

  return {

    ...state,

    cart: !isAdded

      ? [action.product, ...state.cart]

      : state.cart.map(item =>

          item.sku === action.product.sku

            ? { ...item, qty: item.qty + 1 }

            : item

        ),

  };

我懷疑您的代碼按預期運行,因為您確實正確替換了整個購物車數組,并且您變異的項目是您想要更新的項目,但這表明您的化簡器可能不是純函數,即在化簡器計算下一個狀態后,先前的狀態在所有方面仍應等于先前的狀態。


查看完整回答
反對 回復 2022-09-02
?
Helenr

TA貢獻1780條經驗 獲得超4個贊

看起來您正在使用我們的官方 Redux Toolkit 包,默認情況下,該包將警告意外狀態突變。這很好,因為它顯然在這種情況下發現了一個突變。

但是,更好的是,Redux Toolkit在內部使用Immer來讓你在化簡器中編寫“變異”狀態更新!這意味著您的化簡器邏輯可以簡化為:

const cartSlice = createSlice({

  name: 'cart',

  initialState,

  reducers: {

    addToCartSuccess(state, action) {

      const item = state.cart.find(item => item.sku === action.payload.product.sku);

      if (item) {

        item.qty++;

      } else {

        action.product.qty = 1;

        state.cart.unshift(action.payload.product);

      }

    }

  }

})


查看完整回答
反對 回復 2022-09-02
?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

我做了幾次這樣的東西,試試這個代碼:


const addItemToCart = (cartItems, cartItemToAdd) => {

  const existingCartItem = cartItems.find(

    (cartItem) => cartItem.id === cartItemToAdd.id

  );


  if (existingCartItem) {

    return cartItems.map((cartItem) =>

      cartItem.id === cartItemToAdd.id

        ? { ...cartItem, quantity: cartItem.quantity + 1 }

        : cartItem

    );

  }


  return [...cartItems, { ...cartItemToAdd, quantity: 1 }];

};


查看完整回答
反對 回復 2022-09-02
  • 3 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號