无法通过 API 调用访问对象数据答案

【问题标题】：Can't access object data from API call无法通过 API 调用访问对象数据
【发布时间】：2021-02-06 03:42:21
【问题描述】：

我从返回一组国家对象的 API 获取数据。但是，我无法从对象中提取信息，例如名称、标志... 出了什么问题？我该如何解决这个问题？我尝试使用 map 创建一个具有 2 个属性的数组：名称和标志，但我不起作用，例如： const countriesInfo=ranCountries.map(country => {name:country.name, flag: country.flag} });

import React, {useState, useEffect} from 'react';
import './App.css';
import axios from 'axios';
 

function App() {

  const [countries, setCountries] = useState([]);

  useEffect(() => {
    console.log('effect')
    axios
      .get('https://restcountries.eu/rest/v2/all')
      .then(response => {
        console.log('promise fulfilled')
        setCountries(response.data)
      })
  }, []);
    

  console.log('render', countries.length, 'notes');
  console.log(countries[244].name); ???

  
  return (
    <div className="App">
      <h1>Country</h1>
    </div>
  );
}

export default App;

【问题讨论】：

由于 API 调用是异步的，因此您必须考虑值不存在的初始呈现。一旦收到响应并调用setCountries，组件将重新呈现并且数据将可用。您应该先检查数据是否已加载，然后再尝试访问第 245 项，即` if (countries.length > 0) console.log(countries[0].name);`
也可以这样检查对象是否存在countries[244]?.name

标签： reactjs

【解决方案1】：

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    console.log("effect");
    axios.get("https://restcountries.eu/rest/v2/all").then((response) => {
      console.log("promise fulfilled", response.data);
      setCountries(response.data);
    });
  }, []);

  return (
    <div className="App">
      {/* since response is in array of objects we should use map function inorder to iterate each object inside array */}
      {countries.map((item) => (
        <div>
          <h1> Country Name :{item.name}</h1>
          <img src={item.flag} /> {/* // flag */}
        </div>
      ))}
    </div>
  );
}

export default App;

由于响应在对象数组中，我们应该使用 map 函数来迭代数组中的每个对象。

【讨论】：