Javascript React中的Fetch请求：如何在对象数组中映射对象的JSON数组？

我设法获取并可以在浏览器中输出一些数据，但我无法处理JSON中的对象数组。这是一个rest国家的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>
  );
}

import React，{useState，useffect}来自“React”；
从“/CountryListCard”导入CountryListCard；
导入“/CountryList.scss”；
导出默认函数CountryList（）{
const[data，setData]=useState（[]）；
常量fetchData=（）=>{
取回（“https://restcountries.eu/rest/v2/all")
.然后（（res）=>res.json（））
.然后（（结果）=>setData（结果））
.catch（（err）=>console.log（“错误”）；
};
useffect（（）=>{
fetchData（）；
}, []);
返回(
{数据&&
data.map（（元素，索引）=>(
这应该起作用：

{
  data.languages &&
    data.languages.map((element) =>
      element.languages.map((language, index) => (
        <CountryListCard key={index} language={language.iso639_1} />
      ))
    );
}

{
数据语言&&
data.languages.map（（元素）=>
element.languages.map（（语言，索引）=>(
))
);
}
您应该调用国家地图中的语言地图，如：

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

countries.map（国家=>(
{country.name}
{country.languages.map（（语言，语言索引）=>(
{language.name}
))}
))

此外，它与文章无关，但我建议您不要在.map-like-item/element/obj中使用通用名称。Axios就是这样工作的，如果您不重用CountryListCard，它可能与CountryList位于同一个文件中

import React, { useState, useEffect } from "react";
import Axios from "axios";

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

  const fetchData = async () => {
    try {
      const countries = await Axios.get("https://restcountries.eu/rest/v2/all");
      setData(countries.data);
    } catch (err) {
      console.log(err);
    }
  };

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

  return (
    <div>
      {data?.map((country, i) => (
        <CountryListCard
          name={country.name}
          flag={country.flag}
          key={i}
          region={country.region}
          population={country.population}
          languages={country.languages}
          alphaCode={country.alpha3code}
        />
      ))}
    </div>
  );
}

function CountryListCard(props) {
  const [country /*In this case we don't need setCountry*/] = useState(props);

  return (
    <div id={country.alphaCode} className="country">
      <h3>
        <img src={country.flag} width="18" alt={country.alphaCode} /> {country.name}
      </h3>
      <b>Region</b>: {country.region} <br />
      <b>Population</b>: {country.population} <br />
      <b>Languages</b>:{" "}
      {country.languages?.map((lang, i) => (
        <li key={i}>{lang.name}</li>
      ))}
    </div>
  );
}

import React，{useState，useffect}来自“React”；
从“Axios”导入Axios；
导出默认函数CountryList（）{
const[data，setData]=useState（[]）；
const fetchData=async（）=>{
试一试{
const countries=等待Axios.get（“https://restcountries.eu/rest/v2/all");
setData（国家数据）；
}捕捉（错误）{
控制台日志（err）；
}
};
useffect（（）=>{
fetchData（）；
}, []);
返回(
{data？.map（（国家，i）=>(
))}
);
}
功能列表卡（道具）{
const[country/*在这种情况下，我们不需要setCountry*/]=useState（props）；
返回(
{country.name}
地区：{country.Region}

人口：{国家人口}

语言：{'}
{country.languages？.map（（lang，i）=>(
{lang.name}
))}
);
}

上面的代码如下所示：
使用Axios发出请求，它会自动转换JSON数据。嘿@Iago Calazans谢谢你的回答。你是如何在不重复两次的情况下获得语言的？@Greg我传递了数组语言（包含对象）作为el.languages在CountryList中映射数据时，然后在CountryListCard中，我将其再次映射为props.languages？.map（（el，i）=>（
{el.name}
）*数据和props.languages后的字符不验证是否存在。