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

Question

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

我试图根据该项目的名称比较该项目是否已存在于该状态中。

这是我想要发生的事情：

1. 将商品添加到购物车。如果产品名称相同，则将数量加一。（这有效）

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

3. 如果我回到我已经添加的上一个项目，并想再次添加它，那么我想找到该项目的状态，将其与正在传入的当前对象进行比较，并将数量更新一个。（这不起作用）

我决定实现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) {&nbsp; &nbsp; const [ cart, setCart ] = useState([]);const addItem = (obj) => {&nbsp; &nbsp; if (cart.length != 0) {&nbsp; &nbsp; &nbsp; &nbsp; let dataExist = false;&nbsp; &nbsp; &nbsp; &nbsp; cart.map((e, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.productName === obj.productName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const object = e;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const cartCopy = cart;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newObj = update(object, { quantity: { $set: object.quantity + 1 } });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newState = update(cartCopy, { [i]: { $set: newObj } });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart(newState);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataExist=true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; if(dataExist) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart([ ...cart, obj ]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; setCart([ ...cart, obj ]);&nbsp; &nbsp; }};return <CartContext.Provider value={{ cart, addItem }}>{props.children}&nbsp; &nbsp;</CartContext.Provider>;}您的代码所做的是这样的，如果购物车数组中的当前 item(e) 与 obj 不匹配，则会将该 obj 添加到数组中。只有在您对数组进行迭代并确认数组中不存在与 obj 相同的数据后，才能执行此操作。如果该更新不能解决您的问题，我可能需要您提供一些示例数据（即对象结构、示例输出等）来正确测试。

Answer 2

请使用此更新您的代码，如果您可以共享 obj 数据和购物车数据会更好：const addItem = (obj) => {&nbsp; &nbsp; if (cart.length !== 0) {&nbsp; &nbsp; &nbsp; for (let i = 0; i <= cart.length; i += 1) {&nbsp; &nbsp; &nbsp; &nbsp; if (undefined !== cart[i]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (obj.productName === cart[i].productName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const tempArr = [...cart];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tempArr.quantity += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart(tempArr);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart([...cart, obj]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setCart([...cart, obj]);&nbsp; &nbsp; }&nbsp; };

Answer 3

我解决了！InsomniacSabbir 的想法是正确的。我只需要稍微修改代码以获得我想要的结果。这是解决方案import React, { createContext, useState, useEffect } from 'react';import update from 'immutability-helper';export const CartContext = createContext();export function CartProvider(props) {&nbsp; &nbsp; const [ cart, setCart ] = useState([]);&nbsp; &nbsp; const addItem = (obj) => {&nbsp; &nbsp; &nbsp; &nbsp; let dataCheck = true;&nbsp; &nbsp; &nbsp; &nbsp; if (cart.length != 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cart.map((e, i) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.productName === obj.productName) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const object = e;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const cartCopy = cart;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newObj = update(object, { quantity: { $set: object.quantity + 1 } });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newState = update(cartCopy, { [i]: { $set: newObj } });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart(newState);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataCheck = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart([ ...cart, obj ]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (dataCheck === true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCart([ ...cart, obj ]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; return <CartContext.Provider value={{ cart, addItem }}>{props.children}</CartContext.Provider>;}我在地图中有一个 if/else 语句导致了问题。我从 map 中取出 else 语句，并将另一个 if 语句添加到检查dataCheck是否为真/假的函数中。仅当 map 中的 if 语句被执行时，dataCheck才会被设置为 false。