javascript - 在功能组件中发出渲染数据

Question

我正在尝试在函数组件中呈现页脚项列表。

这是我的数据：

export const footerLinks = [{
  "title": "Learn More",
  "data": [{
      id: 'news',
      name: 'News',
      to: '/news'
    },
    {
      id: 'faq',
      name: 'FAQ',
      to: '/faq'
    }
  ]
},
{
  "title": "Media",
  "data": [{
      id: 'media',
      name: 'Media Kit',
      to: '/media'
    },
    {
      id: 'media_enquiries',
      name: 'Media Enquiries',
      to: '/media_enquiries'
    }
  ]
}]

我导入数据并尝试以<ul>. 函数console.log中的确实输出预期值。但是，在 之后，日志显示它是并且只有一个空的才会出现在屏幕上。MyListItemsforEachlistItemsundefined<ul></ul>

有什么想法吗？

import { footerLinks } from '../site'

function MyListItems() {
  const listItems = footerLinks.forEach(section => {
    section.data.map(({id, name, to}) => {
      console.log(id, name, to);
      <li>{name}</li>
    })
  });

  return (
    <ul>{listItems}</ul>
  );
}

export function Footer() {
  return (
    <div>
      <MyListItems />
    </div>
  )
}

标签： javascriptreactjsgatsby

Answer 1

forEach不会在循环外返回任何内容，这意味着它将返回undefined，map而是

 const listItems = footerLinks.map(section => {
    return section.data.map(({id, name, to}) => {
      console.log(id, name, to);
      return <li>{name}</li>
    })
  });

forEach 返回值