REST国家API调用失败与路由器，useParams

Question

目前正在使用REST国家API创建一个项目，这是我第一次使用Router，有一个API调用有点问题，应该在点击时抓住一个国家。作为快速参考，我在这里上传了一个沙盒

在App中这样设置路由:

function App() {
return (
<main>
<Routes>
<Route path="/" element={<CountriesHome />} />
<Route path="/countrydetail/:countryName" element={<CountryDetail />} />
</Routes>
</main>
);
}

countryeshome .js在每个国家的主页上都有一个onClick，使用navigate:

<section
className="flex flex-col cursor-pointer"
key={index}
onClick={() => navigate(`/countrydetail/${cca2.toLowerCase()}`, {})
}
>

在CountryDetail中，我尝试使用params从API

调用特定的国家，这里是用户点击的国家

let { countryName } = useParams();
const [country, setCountry] = useState();
const getCountry = async () => {
try {
const response = await fetch(
`https://restcountries.com/v3.1/alpha/${countryName}`
);
const data = await response.json();
setCountry(data);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getCountry();
}, [countryName]);

然而，我只是没有得到我期望的结果，这个国家返回未定义，我不能解构和渲染它的值。

Answer 1

因为country是一个array，所以我把你的代码改成:

const CountryDetail = () => {
let navigate = useNavigate();
let { countryName } = useParams();
const [country, setCountry] = useState([]);
const getCountry = async () => {
try {
const response = await fetch(
`https://restcountries.com/v3.1/alpha/${countryName}`
);
const data = await response.json();
if (data) {
setCountry(data);
}
} catch (error) {
console.log(error);
} finally {
}
};
useEffect(() => {
getCountry();
}, [countryName]);
return (
<div className="w-11/12 mx-auto grid justify-items-center grid-cols-1 md:grid-cols-3  md:gap-10 lg:grid-cols-4">
<div className="w-80 h-56 mb-4 bg-slate-900"></div>
{country?.map((val) => (
<div>
<section className="justify-self-start pl-4 mb-6">
<h1 className="font-extrabold text-lg mb-4 ">
{val?.name?.common}
</h1>
<h5>
<span className="font-semibold">Native Name: </span>
{val?.name?.official}
</h5>
<h5>
<span className="font-semibold">Population: </span>
{val?.population}
</h5>
<h5>
<span className="font-semibold">Region: </span>
{val?.region}
</h5>
<h5>
<span className="font-semibold">Sub Region: </span>
{val?.subregion}
</h5>
<h5>
<span className="font-semibold">Capital: </span>
{val?.capital}
</h5>
</section>
<section className="justify-self-start pl-4">
<h5>
<span className="font-semibold">Top Level Domain: </span>
{val?.tld}
</h5>
<h5>
<span className="font-semibold">Currencies: </span>
{val?.currencies &&
Object.values(val?.currencies).map((currency) => {
return <span>{currency.name}, </span>;
})}
</h5>
<h5>
<span className="font-semibold">Languages: </span>
{val?.languages &&
Object.entries(val?.languages).map(([key, value]) => {
return <span className="m-1">{value}</span>;
})}
</h5>
</section>
<section className="justify-self-start pl-4 mb-6 ">
<h3 className="font-semibold text-lg">Border Countries: </h3>
{val?.borders &&
val?.borders.map((country) => {
return (
<button className="w-28 py-2 m-2 shadow-[0px_0px_4px_1px_rgba(0, 0, 0, 0.104931)] border-solid border-2 rounded-sm">
{country}
</button>
);
})}
</section>
</div>
))}
</div>
);
};
//
export default CountryDetail;