Estoy tratando de obtener datos de una API desde una entrada. Después de proporcionar la entrada y llamar a los datos, recibo dos llamadas de búsqueda de los mismos datos. aquí está el código de entrada:
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} />Aquí estoy usando la entrada para obtener los datos:
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]);¿Qué estoy haciendo mal aquí?
Su configuración parece buena, pero la causa principal posiblemente sea React.StrictMode
El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarlo a detectarlos haciéndolos un poco más deterministas. Esto se hace mediante una doble invocación intencional de las siguientes funciones: ...
Este efecto solo está en desarrollo, lo que significa que no sucederá en su producción, pero si no desea una doble invocación intencional , puede eliminarlo de su código.