Question

在 React JS 中映射数组对象的嵌套数据

2024-03-19

135

javascript reactjs

我是新手，仍在探索在 React JS 中显示和映射数据。

我想显示嵌套的数据数组对象，但它的行为符合我的要求。这是数据：

{
name: {},
tld: [],
subregion: "Western Europe",
languages: {
   fra: "French",
   gsw: "Swiss German",
   ita: "Italian",
   roh: "Romansh"
},

我想显示语言对象数据，但它总是返回错误。

这是我尝试观察数据行为的代码块：

console.log(countries)
    countries.map(country => {
        console.log('Name:', country.name.common)
        console.log('Area:', country.area),
        console.log('Language:', country.languages)
        // Object.keys(country.languages).map((language) => {
        //  console.log(language)
        // })
    });

我尝试使用 Object.keys，但它也返回错误 ShowCountry.jsx:7 Uncaught TypeError: 无法将未定义或 null 转换为对象

我也尝试使用 .map()

{countries.map(country => (
            <div>
                <p>Country: {country.name.common}</p>
                <p>Area: {country.area}</p>
                <h3>Languages</h3>
                <ul>
                {/* {country.languages.map((language) => (
                    <li>{language}</li>
                    ))ther 
                } */}
                </ul>
            </div>
          ))
          }

它返回一个错误，country.languages.map 不是函数，我怀疑它可能是 null 或空的。这种方法是我在 Stackoverflow 问题中经常看到的，它应该可以工作，但我注意到语言是一种对象语言：{...}，而其他问题是数组对象，例如数组：[{...}, {...}]。

我认为这个问题很简单，但我搞不清楚问题所在。你能帮我一下吗，并给出一些解释或相关链接。

Answer 1

根据您提供的图像和您的问题，就我而言，您似乎正在尝试将对象表示为数组。您可以使用 Object.keys()

为了解决错误 ShowCountry.jsx:7 Uncaught TypeError: Cannot convert undefined or null to object ，您将添加检查 country.languages && 以构建如下代码。

{countries.map((country) => (
  <div key={country.name.common}>
    <p>Country: {country.name.common}</p>
    <p>Area: {country.area}</p>
    {country.languages && (
      <div>
        <h3>Languages</h3>
        <ul>
          {Object.keys(country.languages).map((key) => (
            <li key={key}>{country.languages[key]}</li>
          ))}
        </ul>
      </div>
    )}
  </div>
))}

Answer 2

要显示语言，您需要迭代语言对象的键和值。操作方法如下：

const country = {
    name: {},
    tld: [],
    subregion: "Western Europe",
    languages: {
       fra: "French",
       gsw: "Swiss German",
       ita: "Italian",
       roh: "Romansh"
    }
  }

  {Object.entries(country.languages).map(([code, language]) => (
      console.log(language)
  ))}

Answer 3

您可以使用嵌套的 map() 函数或通过将 map() 与其他数组方法（如 flatMap() ）相结合来映射对象数组中的嵌套数据。

const data = [
  {
    id: 1,
    name: 'John',
    hobbies: ['Reading', 'Gardening']
  },
  {
    id: 2,
    name: 'Alice',
    hobbies: ['Painting', 'Cook`enter code here\'s']
  }
];