samedi 22 mai 2021

React map is duplicating DOM Elements

I have the following issue:

I am building an web application, BackEnd in spring and FrontEnd in React.

Now i am adding a feature that shows how many products are in the cart while the client is clicking in "buy". The problem is that when i do a map to get the api in the dom tree, it seems like is duplicating the element.

Images: Bug: "Carrinho ( )" is being duplicated

Note: I am consuming two APIs

Code:

import React, { useEffect, useState } from 'react';
import {
  Row,
  CardBody,
  Container,
 } from 'reactstrap';



import api from '../../resources/api_produtos';
import apiCart from '../../resources/api_cart';
import axios from 'axios';


const Main = () =>{

  
  const[product, setProduct] = useState([]);
  const[cart, setCart] = useState([]);
 

  const fetchData = () =>{
    const productApi = api.get('');
    const cartApi = apiCart.get('');

    axios.all([productApi, cartApi]).then(
      axios.spread((...allData) =>{
        const allProductData = allData[0].data;
        const allDataCart = allData[1].data;
      

        setProduct(allProductData);
        setCart(allDataCart);
       
        console.log(allDataCart);
      })
    )
  }

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



   return (

    <div>      
 
          <div className="p-3 mb-2 bg-dark text-white d-flex justify-content-between">           
          <div>
            <strong>Game Store</strong>
          </div>
          <div>
              {cart.map(carrinho =>(
              <div key={carrinho.id}>
                <div>
                  Carrinho ( {carrinho.amount} ) HERE IS BEING DUPLICATED
                </div>
              </div>                 
              ))}

            </div>  
          </div>
       
 
    <Container>
      <div className="jumbotron mt-3"><h1>Produtos</h1></div>
      
      {product.map(produto => (
      
      <div className="card mb-3">  
    
          <div key={produto.id}className="card-header d-flex justify-content-between">
            <span>
              Id: {produto.id}
            </span>
            <div>
                      <nav>
                          <form method="POST" action={"http://localhost:8080/comprar/" + produto.id}>
                            <input type="submit" className="btn btn-secondary"  value="Comprar" ></input>
                          </form>
                      </nav>
            </div>
          
          </div>
        
        <CardBody>
        <Row>
          <div className="col-12 col-sm-8 mb-3">  
            <div className="row">       
              <div key={produto.id}>
                      <div >
                        Nome: {produto.name}
                      </div> 
                      <div > 
                        Preço: R$ {produto.price}                          
                      </div>   
              </div>   
            </div>     
          </div> 

            <div className="col-12 col-md-4">            
                  <figure key={produto.id}>
                    <img className="img-thumbnail"src={produto.image} />
                  </figure>
              
            </div>    

            </Row>
          </CardBody>
        
        </div>           
              ))}

       
    </Container> 
    </div>
  );
}


export default Main;

And this is how the API "Cart" looks like:

[{"amount":"7"},[{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"},{"id":12,"name":"Mortal Kombat XL","price":69.99,"score":150,"image":"https://images-americanas.b2w.io/produtos/01/00/offers/01/00/item/126077/6/126077695_1GG.png"}]]

How do i fix this duplication?




Aucun commentaire:

Enregistrer un commentaire