Question

在 React 中如何通过 api 进行数据映射?

2020-01-25

1764

javascript reactjs

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

<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 。由于其他属性按原样使用，因此不会引发异常，但由于您尝试调用 .borders 上的方法，因此该行会引发异常。

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

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

Answer 2

选项 1：使用解构并为边框分配默认值。

const { borders = [] } =  info;

// use `borders` directly
  <ul>
    {borders.map((border) => {
      return <li key={border.name}>{border.name}</li>;
    })}
  </ul>

选项 2：检查未定义/空值

  <ul>
    {info && info.borders && info.borders.length > 0 && info.borders.map((border) => {
      return <li key={border.name}>{border.name}</li>;
    })}
  </ul>