我试图运行此代码来检查购物车中是否已经有产品,如果该产品已经存在,则将其添加到计数中。否则,将该项目添加到项目数组中,我将在其中存储所有要添加的项目。但是,当一个项目已经存在时,计数不会得到一个加总,而是一直返回0。为什么会这样?
当我把它记录下来调试它时,它只是打印出来 count: NaN
这是我的js代码:
import React, {useState, useContext} from 'react'
import data from './data.js'
import useCountsContext from './context/useCountsContext.js'
var uniqid = require('uniqid');
function Shop({ data }) {
const {count, setCount} = useContext(useCountsContext)
const {item, setItem} = useContext(useCountsContext)
const addCart = (productsId) => {
setCount(count + 1)
data.forEach((product) => {
const exists = item.findIndex((i) => i.img === product.img) > -1;
if (exists) {
item.count += 1
console.log(item)
} else if (product.id === productsId) {
setItem(item.concat(product))
}
})
}
return (
<div>
<h1>Shop</h1>
<div className="div___shop">
{data.map(({id, img, button}) => (
<>
<img className="img___shop" key={id} src={img}></img>
<div key={id}>
<button onClick={() => addCart(id)}>{button}</button>
</div>
</>
))}
</div>
</div>
)
}
export default Shop
这是我的数据文件:
import diCaprio from './img/diCaprio.jpg'
import steveJobs from './img/steveJobs.jpg'
import lips from './img/lips.jpg'
import buda from './img/buda.jpg'
import spaceDog from './img/spaceDog.jpg'
import astroNube from './img/astroNube.jpg'
import banksy from './img/Banksy.jpg'
import banksyDJ from './img/banksyDJ.jpg'
var uniqid = require('uniqid');
const data = [{
id: uniqid(),
title: "Steve Jobs",
img: steveJobs,
homeImg: steveJobs,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img: diCaprio,
homeImg: diCaprio,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img: lips,
homeImg: lips,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img: buda,
homeImg: buda,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img: spaceDog,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img:astroNube,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img: banksy,
button: "add to cart",
count: 0
},
{
id: uniqid(),
img:banksyDJ,
button: "add to cart",
count: 0
}
]
export default data;
2条答案
按热度按时间kiayqfof1#
首先,item.count未定义。项是一个对象数组。你的速记
item.count += 1
做item.count = item.count +1;
未定义+1为nan,因此item.count为nan。同样,您没有使用setitem在first if条件中更新状态,您正在改变不推荐的状态,react甚至不会检测到更改,因此不会重新渲染。
您可以创建数组的副本,这样您就有了一个新的引用。然后更新您的特定对象属性。
旁注:我希望您的任何for循环条件只被调用一次。我不认为将setstate放在循环中是更新状态的安全方法。
hxzsmxv22#
像setcount这样的usestate setter函数是异步的,这意味着代码不是按顺序执行的,因此在设置新的计数值之后尝试获取新的计数值是错误的。
您可以在函数期间使用(count+1)而不是count,并在最后调用setcount(count+1)