• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

220
Views
Manejo del estado de respuesta en React useEffect hook - ¿problema del ciclo de vida?

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
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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

Encadenamiento opcional

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error