यदि कोई उपयोगकर्ता कार्ट में दो बार आइटम जोड़ने का प्रयास करता है तो मुझे एक अलर्ट संदेश उठाना होगा। (मेरे प्रोजेक्ट देश में)। लेकिन मैं असफल रहा। यहाँ मेरा लाइव वेबपेज लिंक है:

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

यदि आप एक बटन को कई बार दबाते हैं तो आप समझ जाएंगे कि मेरे कोड में क्या गलत है। यहाँ मेरा मूल App.js है:

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;

यहाँ देश है।जेएस:

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;

यहाँ 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;

कृपया कोई बताएं कि मैंने क्या गलती की है//आइटम जोड़ने और डुप्लिकेट को संभालने में मेरे ऐप.जेएस में हिस्सा है

1
Fuad9 30 अगस्त 2020, 07:32

1 उत्तर

सबसे बढ़िया उत्तर

सरणी के अंत में जोड़े गए नए देश के साथ केवल setCart को कॉल करें यदि वह देश पहले से ही सरणी में मौजूद नहीं है:

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 अगस्त 2020, 04:35