Javascript 更新ReactJs中数组中的嵌套对象

我在更新处于react状态的数组中的嵌套对象时遇到问题

我试图根据某个项的名称来比较该状态中是否已经存在该项

以下是我想要发生的事情：

将项目添加到购物车。如果产品名称相同，则增加一个数量。（本工程）

如果名称不同，则将该新项添加到状态。（这同样有效）

如果我返回到已添加的上一个项目，并希望再次添加该项目，那么我希望找到处于状态的项目，将其与传入的当前对象进行比较，并按1更新数量。（这不起作用）

我决定实现简化更新状态的方法

我应该注意，我使用的是NextJs，这个问题只有在我重新加载一个新的动态页面后才会出现

希望这是足够的信息。。。请让我知道，如果需要更多的信息是有帮助的

提前谢谢

更新2:这是我遇到的另一个问题。。。也许答案是显而易见的，但我想我只是把它放在那里，让第二组眼睛看看它（如果这是一个新问题，请让我知道）

我有一些可选参数与每个项目一起使用。参数是数组中的嵌套对象。我的解决方案是使用以下代码来比较数据

import React, { createContext, useState, useEffect } from 'react';
import update from 'immutability-helper';
export const CartContext = createContext();

export function CartProvider(props) {
    const [ cart, setCart ] = useState([]);

//**********Start of the code to check the parameters of each item********

    const checkArr = (obj1, obj2) => {
        let newArr = [];
        function onlyInFirst(first, second) {
            for (let i = 0; i < first.length; i++) {
                if (second.indexOf(first[i]) === -1) {
                    newArr.push(first[i]);
                }
            }

        }

        onlyInFirst(obj1, obj2);
        onlyInFirst(obj2, obj1);

        if (newArr.length === 0) {
            return false;
        } else {
            return true;
        }
    };

//*******End of the code to check the parameters of each item**********

    const addItem = (obj) => {
        let dataCheck = true;
        if (cart.length != 0) {
            cart.map((e, i) => {
                if (e.productName === obj.productName) {
                    const prevVal = Object.values(e.productParams);
                    const currentVal = Object.values(obj.productParams);
                    dataCheck = checkArr(prevVal, currentVal);
                }
                if (dataCheck === false) {
                    const object = e;
                    const cartCopy = cart;
                    const newObj = update(object, { quantity: { $set: object.quantity + 1 } });
                    const newState = update(cartCopy, { [i]: { $set: newObj } });
                    setCart(newState);
                }
            });
        } else {
            setCart([ ...cart, obj ]);
        }
        if (dataCheck === true) {
            setCart([ ...cart, obj ]);
        }
    };

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

Chrome开发工具的示例输出：

3) [{…}, {…}, {…}]
0: {productName: "Item 1", productParams: {…}, quantity: 4, productPrice: 60}
1: {productName: "Item 2", productParams: {…}, quantity: 3, productPrice: 3000}
2: {productName: "Item 1", productParams: {…}, quantity: 3, productPrice: 60}
length: 3
__proto__: Array(0)

import React，{createContext，useState，useffect}来自'React'；
从“不变性助手”导入更新；
export const CartContext=createContext（）；
导出函数提供程序（道具）{
const[cart，setCart]=useState（[]）；
常量附加项=（对象）=>{
如果（购物车长度！=0）{
购物车地图（（e，i）=>{
如果（e.productName==obj.productName）{
const object=e；
const cartCopy=购物车；
const newObj=update（对象，{quantity:{$set:object.quantity+1}}）；
const newState=update（cartCopy，{[i]：{$set:newObj}）；
setCart（newState）；
}否则{
setCart（[…cart，obj]）；
}
});
}否则{
setCart（[…cart，obj]）；
}
};
返回{props.children}；
}

请使用此代码更新您的代码，如果您可以共享obj数据和购物车数据，则会更好：

const addItem=（obj）=>{
如果（购物车长度！==0）{
对于（设i=0；i您的代码中有一个小错误。当数组中没有匹配的对象时，您应该在map函数外部而不是内部更新cart

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

}

import React，{createContext，useState，useffect}来自'React'；
从“不变性助手”导入更新；
export const CartContext=createContext（）；
导出函数提供程序（道具）{
const[cart，setCart]=useState（[]）；
常量附加项=（对象）=>{
如果（购物车长度！=0）{
让dataExist=false；
购物车地图（（e，i）=>{
如果（e.productName==obj.productName）{
const object=e；
const cartCopy=购物车；
const newObj=update（对象，{quantity:{$set:object.quantity+1}}）；
const newState=update（cartCopy，{[i]：{$set:newObj}）；
setCart（newState）；
dataExist=true
}
});
如果（数据存在）{
setCart（[…cart，obj]）；
}
}否则{
setCart（[…cart，obj]）；
}
};
返回{props.children}；
}

您的代码是这样做的，如果cart数组中的当前项（e）与obj不匹配，则它将该obj添加到数组中。只有在您迭代数组并确认数组中不存在与obj相同的数据后，才能执行此操作

如果该更新无法解决您的问题，我可能需要您提供一些示例数据（即对象结构、示例输出等）来正确测试此问题。
我解决了它！失眠患者Sabbir的想法是正确的。我只需稍微修改代码即可获得我想要的结果

这是解决办法

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

import React，{createContext，useState，useffect}来自'React'；
从“不变性助手”导入更新；
export const CartContext=createContext（）；
导出函数提供程序（道具）{
const[cart，setCart]=useState（[]）；
常量附加项=（对象）=>{
让dataCheck=true；
如果（购物车长度！=0）{
购物车地图（（e，i）=>{
如果（e.productName==obj.productName）{
const object=e；
const cartCopy=购物车；
const newObj=update（对象，{quantity:{$set:object.quantity+1}}）；
const newState=update（cartCopy，{[i]：{$set:newObj}）；
setCart（newState）；
dataCheck=false；
}
});
}否则{
setCart（[…cart，obj]）；
}
如果（数据检查===真）{
setCart（[…cart，obj]）；
}
};
返回{props.children}；
}

我在map中有一个if/else语句导致了问题。我从map中取出了else语句，并在函数中添加了另一个if语句，用于检查dataCheck是否为真/假。dataCheck只有在map中的if语句被执行时才会设置为假

希望这个答案有帮助

谢谢大家的帮助！
在我的本地环境中尝试了此解决方案。不幸的是，当我添加多个项目时，它不会更新数量。但是，我将更新我的问题，以包括购物车数据和对象数据。我也无法使此解决方案起作用。：（我得到的输出只是将项目添加到阵列中而没有upd。）
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>;

}

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