首頁猿問在 ReactJs...

在 ReactJs 中更新數組中的嵌套對象

JavaScript

素胚勾勒不出你 2022-01-01 20:03:50

我在更新處于反應狀態的數組中的嵌套對象時遇到問題。我試圖根據該項目的名稱比較該項目是否已存在于該狀態中。這是我想要發生的事情：將商品添加到購物車。如果產品名稱相同，則將數量加一。（這有效）如果名稱不同，則將該新項目添加到狀態。（這也有效）如果我回到我已經添加的上一個項目，并想再次添加它，那么我想找到該項目的狀態，將其與正在傳入的當前對象進行比較，并將數量更新一個。（這不起作用）我決定實現immutability-helper來簡化更新狀態。我應該注意，我正在使用 NextJs 并且只有在我重新加載一個新的動態頁面后才會出現這個問題。希望這是足夠的信息......如果需要更多信息以提供幫助，請告訴我。提前致謝！

查看完整描述

3 回答

繁星點點滴滴

TA貢獻1803條經驗獲得超3個贊

您的代碼中有一個小錯誤。當數組中沒有匹配的對象時，您應該在 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 相同的數據后，才能執行此操作。

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

反對回復 2022-01-01

明月笑刀無情

TA貢獻1828條經驗獲得超4個贊

請使用此更新您的代碼，如果您可以共享 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]);

}

};

反對回復 2022-01-01

慕婉清6462132

TA貢獻1804條經驗獲得超2個贊

我解決了！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。

反對回復 2022-01-01

3 回答
0 關注
223 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 ReactJs 中更新數組中的嵌套對象

在 ReactJs 中更新數組中的嵌套對象

3 回答

添加回答