React map 正在复制 DOM 元素

Question

我有以下问题：

我正在构建一个 Web 应用程序，BackEnd 在 Spring 中，FrontEnd 在 React 中。

现在我添加了一项功能，当客户点击“购买”时，它会显示购物车中有多少产品。问题是当我做一个映射来获取 dom 树中的 API 时，似乎是在复制元素。

图片： Bug: "Carrinho ( )" is being duplicated

注意： 我正在使用两个 API

代码：

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;

这就是 API“购物车”的样子：

[{"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"}]]

如何修复这种重复？

Answer 1

问题在于您的购物车 API 中的响应对象。 它的格式不正确，因为您的 BE 返回一个没有任何意义的数组，因为响应包含一个购物车。

因此，map 函数遍历一个数组，通过回调修改其内容，将它们放入一个新数组中，然后返回它。 因此，本质上您是在尝试修改索引 0 上的 obj，即带有“金额”字段的 obj，然后，您尝试在索引 1 处映射一个数组。

所以你必须更新来自 BE 的回复，类似这样：

{
    "id": "cart_id",
    "items": []
}

哪个比你的更有意义。请注意，由于 items 是一个数组，因此您不需要“amount”字段，例如，您可以使用 carrinho.items.length 访问它。然后用

渲染它

<div key={carrinho.id}>
    <div>Carrinho ({carrinho.items.length})</div>
</div>