在React中获取请求：如何在对象数组内通过对象的JSON数组进行映射？

120

格雷格：

我设法获取API并可以在浏览器中输出一些数据，但是我无法处理JSON中的对象数组。这是一个休息国家/地区的API，其中一些国家/地区使用一种以上的语言。我想输出他们说的所有语言。这是API链接。这是我的代码

import React, { useState, useEffect } from "react";
import CountryListCard from "./CountryListCard";

import "./CountryList.scss";

export default function CountryList() {
  const [data, setData] = useState([]);

  const fetchData = () => {
    fetch("https://restcountries.eu/rest/v2/all")
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((err) => console.log("error"));
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {data &&
        data.map((element, index) => (
          <CountryListCard
            image={element.flag}
            name={element.name}
            key={index}
            region={element.region}
            population={element.population}
           {/* language={element.languages[0]}   this doesn't work*/}
          />
        ))}
      {/* {data.languages &&
        data.languages.map((element, index) => (  
          <CountryListCard key={index} language={element.languages.iso639_1} />  this doesn't work
        ))} */}
    </div>
  );
}

茶黄素：

您应该在国家/地区地图中调用语言地图，例如：

countries.map(country=>(
<div key={country.name}>
    <h1>{country.name}</h1>
    {country.languages.map((language, languageIndex)=>(
        <p key={languageIndex}>{language.name}</p>
     ))}
</div>
))

此外，它与帖子无关，但我建议您不要在.map中使用通用名称，例如item / element / obj

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。