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

Question

我在更新处于反应状态的数组中的嵌套对象时遇到问题。我试图根据该项目的名称比较该项目是否已存在于该状态中。这是我想要发生的事情：将商品添加到购物车。如果产品名称相同，则将数量加一。（这有效）如果名称不同，则将该新项目添加到状态。（这也有效）如果我回到我已经添加的上一个项目，并想再次添加它，那么我想找到该项目的状态，将其与正在传入的当前对象进行比较，并将数量更新一个。（这不起作用）我决定实现immutability-helper来简化更新状态。我应该注意，我正在使用 NextJs 并且只有在我重新加载一个新的动态页面后才会出现这个问题。希望这是足够的信息......如果需要更多信息以提供帮助，请告诉我。提前致谢！

Answer 1

您的代码中有一个小错误。当数组中没有匹配的对象时，您应该在 map 函数之外而不是在它内部更新购物车。

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

}

您的代码所做的是这样的，如果购物车数组中的当前 item(e) 与 obj 不匹配，则会将该 obj 添加到数组中。只有在您对数组进行迭代并确认数组中不存在与 obj 相同的数据后，才能执行此操作。

如果该更新不能解决您的问题，我可能需要您提供一些示例数据（即对象结构、示例输出等）来正确测试。

Answer 2

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

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

    }

  };

Answer 3

我解决了！InsomniacSabbir 的想法是正确的。我只需要稍微修改代码以获得我想要的结果。

这是解决方案

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 语句导致了问题。我从 map 中取出 else 语句，并将另一个 if 语句添加到检查dataCheck是否为真/假的函数中。仅当 map 中的 if 语句被执行时，dataCheck才会被设置为 false。