分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何检查数组中是否存在现有值，如果是，则不会再次添加它？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何检查数组中是否存在现有值，如果是，则不会再次添加它？？

开发过程中遇到如何检查数组中是否存在现有值，如果是，则不会再次添加它？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何检查数组中是否存在现有值，如果是，则不会再次添加它？的解决方法建议，希望对你解决如何检查数组中是否存在现有值，如果是，则不会再次添加它？有所启发或帮助；

我正在尝试将项目推送到数组，但我希望如果数组中有类似的项目，只需将计数更新为 1，而不是在数组上再次添加该项目。我已经尝试了很多东西，例如 include() 函数，但它没有按预期工作，因为当我在每个产品中映射 item.includes(product) 时，每当我添加一个项目时，计数为每个产品更新...

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) => {
       if (item.includes(product)) {
         product.count += 1
       }  else if (product.ID === productsID) {
          setItem(item.concat(product))
        }
      })
  }
console.log(item)

    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,img: lips,homeimg: lips,img: buda,homeimg: buda,img: spaceDog,img:astroNube,img: banksy,img:banksyDJ,count: 0
}
]

export default data;

解决方法

includes 不适用于对象。改为尝试 find 或 findIndex。我也认为你的支票是错误的。您需要检查 items 是否具有选定的 productId，如果是，则更新其计数。

 const addCart = (productsId) => {
      setCount(count + 1)
      data.forEach((product) => {
       let index = items.findIndex(itm => itm.id === product.id && productId === product.id)
       
       if (index >= 0) {
         let newProduct = { ...items[index] }
         newProduct.count += 1
         setItem( [...item,[index]: newProduct ])
       } else {
          setItem(item.concat(product))
        }
      })
  }

由于 product 是一个对象，因此 includes 将不起作用，因为它只进行“浅”比较，就像您有一个简单的数组（即 ['a','b','c'].includes('c');

在您的情况下，您需要通过 id 来“查找”产品以了解它是否存在。

 const addCart = (productsId) => {
      setCount(count + 1)
      data.forEach((product) => {

       const exist = item.find(i => i.id === product.id); // add this one

       if (exist) {
         product.count += 1
       }  else if (product.id === productsId) {
          setItem(item.concat(product))
        }
      })
  }

您可以了解有关 array.find here 的更多信息。