axios 调用外部的生命周期问题 API

Question

我正在尝试对 React 功能组件进行 axios 调用，但生命周期让我很头疼，因为它不断 returns“无法读取未定义的属性”。我尝试使用条件渲染以及 await/async 函数，但似乎没有任何效果。有人可以告诉我我做错了什么吗？谢谢

import axios from "axios";
import { useParams } from "react-router-dom";

const SingleCountry = () => {
  let params = useParams();
  const [singleCountry, setSingleCountry] = useState([]);

  useEffect(() => {
    const getSingleCountry = () => {
      axios
        .get(`https://restcountries.com/v3.1/name/${params.name}`)
        .then((country) => setSingleCountry(country.data))
        .catch((error) => console.log(`${error}`));
    };
    getSingleCountry();
  }, []);

  return (
    <div>
      <h1>Single Country</h1>
      {singleCountry.length > 0 && (
        <div>
          <h3>{singleCountry.name.common}</h3>
        </div>
      )}
    </div>
  );
};

export default SingleCountry;

Answer 1

您的渲染方法正在尝试访问 singleCountry.name.common，但是，您的状态变量是一个数组。

将渲染函数更改为：

{singleCountry.map(country => <div><h3>{country.name.common}</h3></div>)}

axios 调用外部的生命周期问题 API

Lifecycle issue on axios call to an external API

javascript

reactjs

axios

react-lifecycle