通过 Contentful 嵌套数组映射不起作用

Question

我已经成功地从 Contentful 取回数据，但我似乎无法进一步映射到数组中。我不确定我做错了什么，因为我收到以下错误：field.fields.map is not a function

export default function Header({ links }) {
  console.log(links);
  return (
      <div className='header-links'>
        <ul className='flex text-white uppercase tracking-widest font-medium'>
          {links.map((link) => (
            <div key={link.title}>
              {link.links.map((field) => {
                <div>
                  {field.fields.map((singleLink) => (
                    <p>{singleLink.title}</p>
                  ))}
                </div>;
              })}
            </div>
          ))}
        </ul>
      </div>
  );
}

[
  {
    "title": "Header",
    "logo": {},
    "links": [
      {
        "fields": {
          "title": "Home",
          "slug": "/"
        }
      },
      {
        "fields": {
          "title": "Food",
          "slug": "/Food"
        }
      },
    ]
  }
]

Answer 1

改成这样。当您在 field 内时，它们已经是对象，因此您不能再像数组一样映射

export default function Header({ links }) {
  console.log(links);
  return (
      <div className='header-links'>
        <ul className='flex text-white uppercase tracking-widest font-medium'>
          {links.map((link) => (
            <div key={link.title}>
              {link?.links?.map((field) => (
                <div>
                <p>{field?.fields?.title}</p>
                </div>
              )
            )}
            </div>
          ))}
        </ul>
      </div>
  );
}

通过 Contentful 嵌套数组映射不起作用

Mapping through Contentful nested array is not working

javascript

arrays

reactjs

array.prototype.map