Tengo que enviar un mensaje de alerta si un usuario intentó agregar un artículo dos veces al carrito (en el país de mi proyecto). pero fallé. aquí está el enlace de mi página web en vivo:

https://ultra-nation99.netlify.app/

Si presiona un botón varias veces, comprenderá qué está mal con mi código. aquí está mi App.js padre:

import React, { useEffect, useState } from "react";
import "./App.css";
import Country from "./Components/Country/Country";
import Cart from "./Components/Cart/Cart";

function App() {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    fetch("https://restcountries.eu/rest/v2/all")
      .then((res) => res.json())
      .then((data) => setCountries(data));
  }, []);

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

  // Adding Item and handling duplicacy
  const handleAddCountry = (country) => {
    const newCountry = [...cart, country];
    setCart(newCountry);
    cart.find((item) =>
      item.numericCode === country.numericCode
        ? window.alert("You have already added this country")
        : setCart(newCountry)
    );
  };

  // // Stop Adding Duplicate Item
  // const handleDuplicateCountry = (country) => {
  //   const newCountry = cart.filter((item) =>
  //     item.numericCode === country.numericCode
  //       ? window.alert("You have already added this country")
  //       : setCart(newCountry)
  //   );
  // };

  // Removing Item
  const handleDeleteCountry = (country) => {
    const newCountry = cart.filter((item) => {
      return item.numericCode !== country.numericCode;
    });
    setCart(newCountry);
  };

  return (
    <div className="App">
      <header className="App-header d-flex">
        <div className="countries">
          <h1>Countries Info</h1>

          {countries.map((country) => (
            <Country
              country={country}
              key={country.numericCode}
              handleAddCountry={handleAddCountry}
              handleDeleteCountry={handleDeleteCountry}
            ></Country>
          ))}
        </div>
        <div className="cart">
          <h1>Population</h1>
          <Cart cart={cart}></Cart>
        </div>
      </header>
    </div>
  );
}

export default App;

Aquí está Country.js:

import React from "react";
import "./Country.css";
import Button from "react-bootstrap/Button";

const Country = (props) => {
  // console.log(props);
  const {
    name,
    capital,
    population,
    region,
    currencies,
    flag,
    languages,
  } = props.country;

  return (
    <div className="country-info mb-5">
      <img src={flag} alt="" />
      <h3>Country Name: {name}</h3>
      <h3>Capital Name: {capital}</h3>
      <h3>Population: {population}</h3>
      <h3>Region: {region}</h3>
      {currencies.map((currency, idx) => (
        <h3 key={idx}>Currency: {currency.name}</h3>
      ))}
      {languages.map((language) => (
        <h3>language: {language.name}</h3>
      ))}
      <Button
        vaiant="primary"
        onClick={() => {
          props.handleAddCountry(props.country);
        }}
      >
        Add Country
      </Button>
      <Button
        vairant="primary"
        onClick={() => props.handleDeleteCountry(props.country)}
      >
        Remove Country
      </Button>
    </div>
  );
};

export default Country;

Aquí está Cart.js:

import React from "react";

const Cart = (props) => {
  // console.log(props.cart);
  const GrossPopulation = props.cart;
  let totalPopulation = 0;
  totalPopulation = GrossPopulation.reduce(
    (acc, current) => acc + current.population,
    0
  );

  return (
    <div>
      <h3>Country Added: {GrossPopulation.length}</h3>
      <h3>Total Population: {totalPopulation}</h3>
    </div>
  );
};

export default Cart;

Por favor, alguien explique cuál es el error que cometí en // Agregar elemento y Manejar duplicado agregar parte en mi App.js

1
Fuad9 30 ago. 2020 a las 07:32

1 respuesta

La mejor respuesta

Solo llame a setCart con el nuevo país agregado al final de la matriz si ese país aún no existe en la matriz:

const handleAddCountry = (country) => {
  if (cart.some(item => item.numericCode === country.numericCode)) {
    window.alert("You have already added this country");
    return;
  }
  setCart([...cart, country]);
};
0
CertainPerformance 30 ago. 2020 a las 04:35