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
Creo que debe estar equivocado acerca de la forma de countriesData
. Lo inicializa en una matriz vacía, por lo que .map
funcionará en eso. Luego, el único lugar donde lo cambia es setCountriesData(data)
, por lo que no debe ser una matriz.
Si está seguro de que está configurando la matriz en datos de países, puede corregirlo simplemente agregando la sintaxis de encadenamiento opcional.
reemplazar countriesData.map
con
countriesData?.map