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

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

在 ReactJs 中更新數(shù)組中的嵌套對象

在 ReactJs 中更新數(shù)組中的嵌套對象

素胚勾勒不出你 2022-01-01 20:03:50
我在更新處于反應(yīng)狀態(tài)的數(shù)組中的嵌套對象時遇到問題。我試圖根據(jù)該項(xiàng)目的名稱比較該項(xiàng)目是否已存在于該狀態(tài)中。這是我想要發(fā)生的事情：將商品添加到購物車。如果產(chǎn)品名稱相同，則將數(shù)量加一。（這有效）如果名稱不同，則將該新項(xiàng)目添加到狀態(tài)。（這也有效）如果我回到我已經(jīng)添加的上一個項(xiàng)目，并想再次添加它，那么我想找到該項(xiàng)目的狀態(tài)，將其與正在傳入的當(dāng)前對象進(jìn)行比較，并將數(shù)量更新一個。（這不起作用）我決定實(shí)現(xiàn)immutability-helper來簡化更新狀態(tài)。我應(yīng)該注意，我正在使用 NextJs 并且只有在我重新加載一個新的動態(tài)頁面后才會出現(xiàn)這個問題。希望這是足夠的信息......如果需要更多信息以提供幫助，請告訴我。提前致謝！
查看完整描述

3 回答

?
繁星點(diǎn)點(diǎn)滴滴

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個贊

您的代碼中有一個小錯誤。當(dāng)數(shù)組中沒有匹配的對象時，您應(yīng)該在 map 函數(shù)之外而不是在它內(nèi)部更新購物車。


import React, { createContext, useState, useEffect } from 'react';

import update from 'immutability-helper';

export const CartContext = createContext();


export function CartProvider(props) {

    const [ cart, setCart ] = useState([]);


const addItem = (obj) => {

    if (cart.length != 0) {

        let dataExist = false;

        cart.map((e, i) => {

            if (e.productName === obj.productName) {

                const object = e;

                const cartCopy = cart;

                const newObj = update(object, { quantity: { $set: object.quantity + 1 } });

                const newState = update(cartCopy, { [i]: { $set: newObj } });

                setCart(newState);

                dataExist=true

            }

        });

        if(dataExist) {

            setCart([ ...cart, obj ]);

        }

    } else {

        setCart([ ...cart, obj ]);

    }

};


return <CartContext.Provider value={{ cart, addItem }}>{props.children}   </CartContext.Provider>;


}

您的代碼所做的是這樣的，如果購物車數(shù)組中的當(dāng)前 item(e) 與 obj 不匹配，則會將該 obj 添加到數(shù)組中。只有在您對數(shù)組進(jìn)行迭代并確認(rèn)數(shù)組中不存在與 obj 相同的數(shù)據(jù)后，才能執(zhí)行此操作。


如果該更新不能解決您的問題，我可能需要您提供一些示例數(shù)據(jù)（即對象結(jié)構(gòu)、示例輸出等）來正確測試。


查看完整回答
反對 回復(fù) 2022-01-01
?
明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個贊

請使用此更新您的代碼，如果您可以共享 obj 數(shù)據(jù)和購物車數(shù)據(jù)會更好：


const addItem = (obj) => {

    if (cart.length !== 0) {

      for (let i = 0; i <= cart.length; i += 1) {

        if (undefined !== cart[i]) {

          if (obj.productName === cart[i].productName) {

            const tempArr = [...cart];

            tempArr.quantity += 1;

            setCart(tempArr);

          } else {

            setCart([...cart, obj]);

          }

        }

      }

    } else {

      setCart([...cart, obj]);

    }

  };


查看完整回答
反對 回復(fù) 2022-01-01
?
慕婉清6462132

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個贊

我解決了！InsomniacSabbir 的想法是正確的。我只需要稍微修改代碼以獲得我想要的結(jié)果。


這是解決方案


import React, { createContext, useState, useEffect } from 'react';

import update from 'immutability-helper';

export const CartContext = createContext();


export function CartProvider(props) {

    const [ cart, setCart ] = useState([]);


    const addItem = (obj) => {

        let dataCheck = true;

        if (cart.length != 0) {

            cart.map((e, i) => {

                if (e.productName === obj.productName) {

                    const object = e;

                    const cartCopy = cart;

                    const newObj = update(object, { quantity: { $set: object.quantity + 1 } });

                    const newState = update(cartCopy, { [i]: { $set: newObj } });

                    setCart(newState);

                    dataCheck = false;

                }

            });

        } else {

            setCart([ ...cart, obj ]);

        }

        if (dataCheck === true) {

            setCart([ ...cart, obj ]);

        }

    };


    return <CartContext.Provider value={{ cart, addItem }}>{props.children}</CartContext.Provider>;

}

我在地圖中有一個 if/else 語句導(dǎo)致了問題。我從 map 中取出 else 語句，并將另一個 if 語句添加到檢查dataCheck是否為真/假的函數(shù)中。僅當(dāng) map 中的 if 語句被執(zhí)行時，dataCheck才會被設(shè)置為 false。


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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