为什么项目在计数中没有得到总和?

oknwwptz  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(257)

我试图运行此代码来检查购物车中是否已经有产品,如果该产品已经存在,则将其添加到计数中。否则,将该项目添加到项目数组中,我将在其中存储所有要添加的项目。但是,当一个项目已经存在时,计数不会得到一个加总,而是一直返回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;
kiayqfof

kiayqfof1#

首先,item.count未定义。项是一个对象数组。你的速记 item.count += 1item.count = item.count +1; 未定义+1为nan,因此item.count为nan。
同样,您没有使用setitem在first if条件中更新状态,您正在改变不推荐的状态,react甚至不会检测到更改,因此不会重新渲染。
您可以创建数组的副本,这样您就有了一个新的引用。然后更新您的特定对象属性。

let findInd = item.findIndex((i) => i.img  === product.img);
 const exists = (findInd > -1);

if (exists) {
          let newArry = [...item];
         let newObj = { ...newArry[findInd]};
newObj.count++;
         console.log(newArry)
  setItem(newArry);
       }

旁注:我希望您的任何for循环条件只被调用一次。我不认为将setstate放在循环中是更新状态的安全方法。

hxzsmxv2

hxzsmxv22#

像setcount这样的usestate setter函数是异步的,这意味着代码不是按顺序执行的,因此在设置新的计数值之后尝试获取新的计数值是错误的。
您可以在函数期间使用(count+1)而不是count,并在最后调用setcount(count+1)

相关问题