在功能组件中发布渲染数据

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在MyListItems功能确实输出的预期值。但是，在forEach日志listItems显示之后，它是undefined且只有一个空白<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>
  )
}

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返回值