useeffect function fetch multiple data-CodePudding

I am trying to fetch data from an API from an input. After providing the input and calling the data, I am getting two fetch call from same data. here is the code of input:


  const [countryName, setCountryName] = useState<string>("");

  const handleInputChange = (event: {
    target: { value: React.SetStateAction<string> };
  }) => {
    setCountryName(event.target.value);
  };

  const onSubmit = () => {
    navigate(`/country/${countryName}`);
  };

<TextField
          variant="standard"
          placeholder="Enter country Name"
          value={countryName}
          onChange={handleInputChange}
        />

Here I am using the input to fetch the data:

const { name } = useParams();

  const [loading, setLoading] = useState<boolean>(false);

  const [country, setCountry] = useState<InitCountry>();

  useEffect(() => {
    const getCountry = async () => {
      setLoading(true);

      const response = await fetch(
        `https://restcountries.com/v3.1/name/${name}`
      );
      const data = await response.json();
      console.log(data);
      setCountry(data.length > 1 ? data[2] : data[0]);

      setLoading(false);
    };
    getCountry();
  }, [name]);

What am I doing wrong here?

CodePudding user response：

Your setup seems good, but the root cause is possibly from React.StrictMode

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: ...

This effect is only in development which means it won't happen in your production, but if you don't want intentionally double-invoking, you can remove it from your code.