javascript - React中如何通过api数据进行映射？

Question

我正在使用国家/地区 API 构建一个应用程序，该应用程序显示国家/地区的名称、人口和地区等信息。我想显示该国家/地区的语言、货币和边界。我尝试映射数据以显示边界，但它说 map 未定义。

<div>
    // this works and displays
    <h1>{info.name}</h1>
    <p>Population: {info.population}</p>
    <p>Region: {info.region}</p>
    <p>Capital: {info.capital}</p>
    <h4>Languages:</h4> 
    // this gives the error 'cannot map of undefined'
    <ul>
        {info.borders.map((border) => {
          return <li key={border.name}>{border.name}</li>; })}
    </ul>
</div>

这是我正在使用的响应数据

data:
name: "Brazil"
topLevelDomain: [".br"]
alpha2Code: "BR"
alpha3Code: "BRA"
callingCodes: ["55"]
capital: "Brasília"
altSpellings: (4) ["BR", "Brasil", "Federative Republic of Brazil", "República Federativa do Brasil"]
region: "Americas"
subregion: "South America"
population: 206135893
latlng: (2) [-10, -55]
demonym: "Brazilian"
area: 8515767
gini: 54.7
timezones: (4) ["UTC-05:00", "UTC-04:00", "UTC-03:00", "UTC-02:00"]
borders: (10) ["ARG", "BOL", "COL", "GUF", "GUY", "PRY", "PER", "SUR", "URY", "VEN"]
nativeName: "Brasil"
numericCode: "076"
currencies: [{…}]
languages: [{…}]

以下是我获取数据的方式

const Infopage = () => {
  const [info, setInfo] = useState({});

  const code = useParams().alpha3Code;

  useEffect(() => {
    console.log('info');
    axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`)
      .then((response) => {
        console.log(response);
        setInfo(response.data);
      });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <CountryInfo info={info} />
    </div>
  );
};
export default Infopage;

我尝试过同样的问题

 const [info, setInfo] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  const code = useParams().alpha3Code;

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await axios.get(
        `https://restcountries.eu/rest/v2/alpha/${code}`
      );
      setInfo(result.data);
      setIsLoading(false);
    };
    fetchData();
  }, [code]);

  return (
    <div>{isLoading ? <h1>Loading...</h1> : <CountryInfo info={info} />}</div>

Answer 1

根据你的问题很难判断，但我敢打赌 info是一个空对象，JavaScript 给你 undefined对于每个属性(property)访问。因为其他属性按原样使用，所以不会引发异常，但是因为您尝试调用 .borders 上的方法，该行抛出异常。

如果是这种情况，可能是因为您使用了 const [info, setInfo] = useState({})并依靠useEffect填充对象。这意味着首先渲染(至少)，直到 useEffect 中出现任何异步工作。解析，初始值由useState返回。如果是这种情况，您应该显示加载状态(或无数据)，直到填充为止。请记住，React 可能会出于任何原因多次渲染您的组件，因此不要依赖渲染计数或顺序。

如果可能，请添加有关如何获取数据的详细信息。如果没有，请在尝试构建 React 元素( console.log )之前添加一个断点(或 <div> )。