函数组件中渲染页脚列表数据时出现空列表问题求助

你遇到的问题主要是两个JavaScript数组方法的特性导致的，咱们一步步拆解：

问题根源 #

1. forEach没有返回值：你用footerLinks.forEach(...)给listItems赋值，但forEach的设计只是遍历数组执行回调逻辑，它的返回值永远是undefined——这就是页面只渲染空<ul>的核心原因。
2. map回调未返回JSX：就算把forEach换成map，你当前的section.data.map(...)里没有显式返回<li>元素，相当于每个map回调都默认返回undefined，最终也得不到有效的JSX数组。

修正方案 #

下面是两种常见的修正方式，你可以根据需求选择：

方式1：合并所有列表项到一个<ul>中 #

用flatMap替代forEach，它会先对每个section的data执行map转换，再把结果扁平化（把二维数组转成一维），同时确保返回JSX元素：

import { footerLinks } from '../site'
function MyListItems() {
  const listItems = footerLinks.flatMap(section => {
    // 显式返回每个section对应的<li>数组
    return section.data.map(({id, name, to}) => {
      console.log(id, name, to);
      // 必须返回<li>，同时添加React要求的唯一key
      return <li key={id}>{name}</li>
    })
  });
  return (
    <ul>{listItems}</ul>
  );
}
export function Footer() {
  return (
    <div>
      <MyListItems />
    </div>
  )
}

方式2：按section分组渲染（保留标题） #

如果你想保留每个section的标题（比如先显示"Learn More"再展示对应列表），可以用嵌套的map实现分组：

import { footerLinks } from '../site'
function MyListItems() {
  return (
    <div className="footer-sections">
      {footerLinks.map(section => (
        <div key={section.title} className="footer-section">
          <h4>{section.title}</h4>
          <ul>
            {section.data.map(({id, name, to}) => (
              <li key={id}>{name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}
export function Footer() {
  return (
    <div>
      <MyListItems />
    </div>
  )
}

关键注意点 #

• 永远不要用forEach生成JSX列表，它的设计目的是执行副作用（比如打印日志），而非返回数据；要用map/flatMap这类有返回值的数组方法。
• 列表元素必须添加唯一的key属性，React用它来追踪元素变化，避免渲染警告和性能问题，这里用数据里的id是最优选择。
• 箭头函数中如果要返回多行JSX或者需要显式逻辑，记得用return（单行表达式可以省略，但为了代码清晰建议显式写出）。

内容的提问来源于stack exchange，提问作者Andy Hoffman