How can I dynamically change an ID when I'm clicking on the button? When I click on the button, the product is added only once, the second time it is added only if the page is reloaded. How to fix it? I set v4() (uuid). ID of the product is generating only after when I'm reloading the page

 const [products, setProducts] = useState([])
 const [list, setList] = useLocalStorage('data', {id: '', name: '', image: '', priceTotal: '', category: ''})



  const getProducts = async() => {
    const data = await ProductDataService.getAllProducts()
    setProducts(data.docs.map((doc) => ({...doc.data(), id: v4()})))
  }

  useEffect(() => {
    getProducts()
  }, [])


  const handleClick = async(item) => {
    if (list.indexOf(item) !== -1) return
    await addDoc(collection(db, 'list'), {
      id: item.id,
      image: item.image,
      name: item.name,
      priceTotal: item.priceTotal,
      category: item.category
    })
    setList([...list, item])
    console.log(item)
  }

Delete function:

    const deleteProduct = (id) => {
        setList((list) => list.filter((product) => id !== product.id))
    }

Database:

[
  {
    "products": {
      "id": 1,
      "category": "Consoles",
      "categoryId": 1,
      "image": "img",
      "name": "XBOX 360",
      "oldPrice": 1900,
      "priceTotal": 420
    }
  },
  {
    "products": {
      "id": 2,
      "category": "Steam",
      "categoryId": 4,
      "image": "img",
      "name": "500 STARS",
      "oldPrice": 1674,
      "priceTotal": 460
    }
  },
  {
    "products": {
      "id": 3,
      "category": "Smartphones",
      "categoryId": 3,
      "image": "img",
      "name": "Apple iPhone 13 Pro Max 256Gb ",
      "oldPrice": 2000,
      "priceTotal": 500
    }
  },
  {
    "products": {
      "id": 4,
      "category": "Headphones",
      "categoryId": 2,
      "image": "img",
      "name": "Apple AirPods Pro",
      "oldPrice": 1833,
      "priceTotal": 450
    }
  },
  {
    "products": {
      "id": 5,
      "category": "Consoles",
      "categoryId": 1,
      "image": "img",
      "name": "Sony PlayStation 5 Digital Edition",
      "oldPrice": 3250,
      "priceTotal": 678
    }
  },
  {
    "products": {
      "id": 6,
      "category": "Smartphones",
      "categoryId": 3,
      "image": "img",
      "name": "LENOVO P42 ",
      "oldPrice": 1500,
      "priceTotal": 300
    }
  },
  {
    "products": {
      "id": 7,
      "category": "Steam",
      "categoryId": 4,
      "image": "img",
      "name": "100 STARS",
      "oldPrice": 1000,
      "priceTotal": 3000
    }
  }
]

CodePudding user response：

You need to create a copy of the item and set new id in click handler and remove the first condition:

  const handleClick = async(item) => {
    const newItem = { ...item, id: v4() }
    await addDoc(collection(db, 'list'), {
      id: newItem.id,
      image: newItem.image,
      name: newItem.name,
      priceTotal: newItem.priceTotal,
      category: newItem.category
    })
    setList([...list, newItem])
    console.log(newItem)
  }