第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

盡管使用傳播運算符進行狀態(tài)復(fù)制,但仍存在 Redux 狀態(tài)突變

盡管使用傳播運算符進行狀態(tài)復(fù)制,但仍存在 Redux 狀態(tài)突變

楊__羊羊 2022-09-02 21:10:59
為什么我在使用傳播運算符復(fù)制對象時收到狀態(tài)突變警報?我正在嘗試用redux制作一個購物車。當添加元素或減少其數(shù)量時,我會調(diào)度一個更新 de 狀態(tài)的操作。在我的化簡器中,如果尚未添加產(chǎn)品,我將返回帶有新對象的狀態(tài)數(shù)組的新副本。如果已經(jīng)添加了它,我將使用map(返回一個新數(shù)組)和我正在增加的產(chǎn)品的副本進行迭代,并且其屬性增加。問題是此屬性 在不改變狀態(tài)的情況下更新此屬性的正確方法是什么?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        ),  };違規(guī)警告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條經(jīng)驗 獲得超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

        ),

  };

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


查看完整回答
反對 回復(fù) 2022-09-02
?
Helenr

TA貢獻1780條經(jīng)驗 獲得超4個贊

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

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

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);

      }

    }

  }

})


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

TA貢獻1827條經(jīng)驗 獲得超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 }];

};


查看完整回答
反對 回復(fù) 2022-09-02
  • 3 回答
  • 0 關(guān)注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號