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 return value

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

1 个答案: