React-router-dom,useNavigate(-1)问题

Question

我正在从事国家项目。当 border 按钮被点击时，我得到了相关信息。但是当我点击Back按钮时，之前的国家数据并没有出现。我怎样才能解决这个问题？请帮助我！

这是我的国家组成部分

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;

Answer 1

useEffect 挂钩缺少 getSingleCountryData 和 countryCode 作为依赖项。您需要记住 getSingleCountryData 回调，以便将其作为稳定的回调参考提供给 useEffect 挂钩。

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]);

由于 country 数据是在 countryCode 路由参数更新时获取和加载的，因此单击 link 时不再需要触发此获取。

{country.borders && country.borders.map((border, index) => (
  <Link
    key={index}
    to={`/countries/${border}`}
    className='btn'
  >
    {border}
  </Link>
))}

并且由于不再通过点击处理程序获取数据并且仅在 useEffect 中引用，getSingleCountryData 可以移动到 useEffect 挂钩并作为依赖项完全删除。

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]);

React-router-dom,useNavigate(-1)问题

React-router-dom, useNavigate(-1) problem

javascript

reactjs

react-router-dom