Javascript 在不插入其他对象的情况下更新useState
这是该组件的完整代码，我太累了，无法思考如何解决这个问题Javascript 在不插入其他对象的情况下更新useState,javascript,reactjs,react-hooks,local-storage,use-state,Javascript,Reactjs,React Hooks,Local Storage,Use State,这是该组件的完整代码，我太累了，无法思考如何解决这个问题 import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; function CnContent(props) { const getCart = JSON.parse(localStorage.getItem('cart')); const products = [ {
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
function CnContent(props) {
const getCart = JSON.parse(localStorage.getItem('cart'));
const products = [
{
id: 0,
imgsrc: process.env.PUBLIC_URL + '/assets/images/products/grocery-staples/pro_1.jpg',
name: "O'range 500 ml Coconut Oil(Bottle)",
quantity: "500 ml",
offer_price: "₹ 116",
real_price: "₹ 219",
inCart: 1
},
{
id: 1,
imgsrc: process.env.PUBLIC_URL + '/assets/images/products/grocery-staples/pro_2.jpg',
name: "Parachute 100% Pure Coconut Oil (Plastic Bottle)",
quantity: "600 ml",
offer_price: "₹ 210",
real_price: "₹ 250",
inCart: 1
},
{
id: 2,
imgsrc: process.env.PUBLIC_URL + '/assets/images/products/grocery-staples/pro_3.jpg',
name: "Fortune Soya Chunks",
quantity: "1 kg",
offer_price: "₹ 126",
real_price: "₹ 135",
inCart: 1
},
]
const [cart, setCart] = useState(getCart);
useEffect(() => {
localStorage.setItem('cart', JSON.stringify(cart));
}, [cart])
function addToCart(pr) {
let duplicate = cart.find((x) => x.id === pr.id)
if (!duplicate) {
setCart((prevState) => {
return [...prevState, pr]
});
}
else {
setCart((prevState) => [...prevState, prevState[pr.id] = { inCart: prevState[pr.id].inCart + 1 }]); // This creates another object and sends to the array (cart), but I want to change the value of the specific product(cart[pr.id]).
}
}
return (
<>
<div className='cn-table'>
<div className='section-left'></div>
<div className='section-right'>
{
products.map((pr, i) => {
return (
<div tabIndex='-1' className='products' key={i}>
<div className="products__wrapper">
<Link to='https://www.youtube.com' className='products__link'>
<div className='products__img'>
<img src={pr.imgsrc} alt={pr.name}></img>
</div>
<div className='products__name'>{pr.name}</div>
<div className='products__quantity'>{pr.quantity}</div>
</Link>
<div className='products__details'>
<div className='products__details__price'>
<div className='products__details__price__offer'>{pr.offer_price}</div>
<div className='products__details__price__real'>{pr.real_price}</div>
</div>
<div className='add-to-cart zero-products'>
<button className='add-to-cart__remove' >-</button>
<button className='add-to-cart__text active'>{pr.inCart}</button>
<button className='add-to-cart__add' onClick={() => addToCart(pr)}>+</button>
</div>
</div>
</div>
</div>
)
})
}
</div>
</div>
</>
)
}
export { CnContent };
编辑：将Incontat的值从0更改为1。您需要在购物车上映射
，并仅更新所需的产品
setCart（（prevState）=>prevState.map（product=>{
if（product.id==pr.id）{
返回{
…产品，
化身：product.incontat+1
}
}
退货产品；
})
如果我将einvot的值从0更改为1，则此代码将解决问题，但如果可能，请在没有更改einvot值的地方发布答案
function addToCart(pr) {
setCart((prevState) => {
let duplicate = prevState.find((x) => x.id === pr.id)
if (!duplicate)
return [...prevState, pr];
else {
prevState[pr.id].inCart += 1;
return [...prevState];
}
})
}
我已使用上述代码，而不是：
function addToCart(pr) {
let duplicate = cart.find((x) => x.id === pr.id)
if (!duplicate) {
setCart((prevState) => {
return [...prevState, pr]
});
}
else {
setCart((prevState) => [...prevState, prevState[pr.id] = { inCart: prevState[pr.id].inCart + 1 }]); // This creates another object and sends to the array (cart), but I want to change the value of the specific product(cart[pr.id]).
}
}
如果localStorage中已经有一些值，它就可以工作，但是如果localStorage是空的，它就不工作了。感谢您的辛勤工作。@ANURAGGOLDEN这是为的else
部分工作的。您的getCart
应该像const getCart=JSON.parse（localStorage.getItem）一样初始化（“购物车”）| |[]；
在未设置localStorage时有一个默认值。感谢您的建议，但我还有一个标题组件，如果localStorage没有“cart”项，它有义务将“cart”项提供给localStorage。哦，等等，让我试试这也会影响产品
数组，因为您正在修改对象。不，产品数组是常量d我根本没有对它进行变异。我使用map函数创建了一个临时对象，它循环并终止执行prevState[pr.id]的代码。Inboat+=1；
变异产品
，因为您可以通过addToCart（pr）在购物车中插入元素
其中pr
是一个对象。因此购物车引用产品项目。数组是恒定的，但你可以通过这种方式改变其中的对象。哦，是的，我改变的是对象，而不是数组。如果我想增加相同产品的数量，我没有选择，因为我不想在localStorage
中创建另一个对象我是否应该改变特定对象的化身值pr.id
我要问另一个问题。这是一个愚蠢的问题，但如果你能帮我解决这个问题。
function addToCart(pr) {
let duplicate = cart.find((x) => x.id === pr.id)
if (!duplicate) {
setCart((prevState) => {
return [...prevState, pr]
});
}
else {
setCart((prevState) => [...prevState, prevState[pr.id] = { inCart: prevState[pr.id].inCart + 1 }]); // This creates another object and sends to the array (cart), but I want to change the value of the specific product(cart[pr.id]).
}
}