Estoy trabajando en un proyecto de países. Obtengo información sobre esto cuando se hace clic en los botones del border . Pero cuando hago clic en el botón Back , los datos del país anterior no aparecen. ¿Cómo puedo arreglar esto? ¡Por favor, ayúdame!
Aquí está mi componente de país
import React, { useEffect, useState } from 'react'; import { Link, useParams, useNavigate } from 'react-router-dom'; import Loading from './Loading'; function Country() { const { countryCode } = useParams(); const navigate = useNavigate(); const [country, setCountry] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { getSingleCountryData(countryCode); }, []); const getSingleCountryData = async (countryCode) => { setLoading(true); try { const country = JSON.parse(localStorage.getItem("countries")).filter(c => c.cca3 === countryCode); setCountry(country[0]); setLoading(false); } catch (err) { console.log(err); } } return loading ? <Loading /> : ( <div className='country container'> <button className='btn backBtn' onClick={() => navigate(-1)}> Back </button> // some code <div className="country__borders"> <h4>Border Countries:</h4> {country.borders && country.borders.map((border, index) => { return <Link to={`/countries/${border}`} onClick={() => getSingleCountryData(border)} key={index} className='btn'>{border}</Link> })} </div> </div> ); } export default Country;Al gancho useEffect le faltan getSingleCountryData y countryCode como dependencias. Querrá memorizar la devolución de llamada getSingleCountryData para que se proporcione al useEffect como una referencia de devolución de llamada estable.
const getSingleCountryData = useCallback(async (countryCode) => { setLoading(true); try { const country = (JSON.parse(localStorage.getItem("countries")) || []) .filter(c => c.cca3 === countryCode); setCountry(country[0]); } catch (err) { console.log(err); } finally { setLoading(false); } }, []); useEffect(() => { getSingleCountryData(countryCode); }, [countryCode, getSingleCountryData]); Dado que los datos del country se obtienen y cargan cuando se actualiza el parámetro de ruta countryCode , ya no será necesario activar esta obtención cuando se haga clic en el enlace.
{country.borders && country.borders.map((border, index) => ( <Link key={index} to={`/countries/${border}`} className='btn' > {border} </Link> ))} Y dado que los datos ya no se obtienen a través de un controlador de clics y solo se hace referencia en useEffect , getSingleCountryData se puede mover al useEffect y eliminarse por completo como una dependencia.
const getSingleCountryData = useCallback(, []); useEffect(() => { const getSingleCountryData = async (countryCode) => { setLoading(true); try { const country = (JSON.parse(localStorage.getItem("countries")) || []) .filter(c => c.cca3 === countryCode); setCountry(country[0]); } catch (err) { console.log(err); } finally { setLoading(false); } } getSingleCountryData(countryCode); }, [countryCode]);