Actualmente estoy procesando algunos datos mediante la obtención de API dentro del useEffect .

Tengo una variable searchValue que contiene el valor que ingresa el usuario en el campo de búsqueda de la página de inicio. Esto se transmite a este component .

He configurado searchValue en las dependencias de useEffect para que cuando cambie vuelva a ejecutar el efecto.

Cuando se monta, parece que se salta la !res.ok if. He registrado el res.ok en la consola fuera de esta instrucción if y con cada carácter ingresado en el valor de searchValue , siempre vuelve a ser true . El estado de respuesta siempre es 200 después de presionar un carácter, por lo que nunca ejecuta el bloque de declaración !res.ok if. Algo debe estar mal con mi comprensión del ciclo de vida o las llamadas asincrónicas.

Recibo el error: countriesData.map is not a function , por lo que está tratando de representar el map en datos no válidos; sin embargo, esto ni siquiera debería regresar ya que tengo if (error) escrito primero dentro de la función de Content . Si esto coincide, debería devolver el mensaje de error, pero esto se omite y los datos de los countriesData se actualizan con datos no válidos. Mi código está abajo, ¡ayuda por favor! ¡Siento que me estoy perdiendo algo simple y estoy malinterpretando algunos fundamentos de React!

 import { useEffect, useState } from 'react' import CountryCard from '../CountryCard' import { countries } from './CountriesList.module.css' const CountriesList = ({ searchValue }) => { const [error, setError] = useState(false) const [loading, setLoading] = useState(true) const [countriesData, setCountriesData] = useState([]) useEffect(() => { const getCountries = async () => { let res = await fetch('https://restcountries.com/v2/all') if (searchValue !== '') { res = await fetch( `https://restcountries.com/v2/name/${searchValue}` ) } if (!res.ok) { console.log(res) return setError(true) } const data = await res.json() setCountriesData(data) setLoading(false) } getCountries() // return () => setLoading(true) }, [searchValue]) const Content = () => { if (error) { return <div>Error: please check the country you have typed</div> } if (loading) { return <div>Loading...</div> } return ( <section className={`${countries} columns is-multiline`}> {countriesData.map((country) => ( <CountryCard {...country} key={country.name} /> ))} </section> ) } return <Content /> } export default CountriesList