NextJS多组件生成问题：Tag组件无法通过forEach渲染

React渲染列表时，需要接收元素数组作为输出，而forEach方法本身没有返回值（执行后返回undefined）——它只是遍历数组执行回调函数，不会收集回调里创建的Tag组件实例，自然无法渲染出标签。

错误写法示例（你的场景） #

function Block({ tags }) {
  // forEach仅执行逻辑，不会返回组件数组
  tags.forEach(tag => {
    return <Tag text={tag} />
  })
  return <div></div>
}

正确写法：改用map方法 #

map方法会遍历数组并返回一个新数组，刚好符合React对列表渲染的要求：

function Block({ tags }) {
  return (
    <div>
      {tags.map((tag, index) => (
        // 必须添加唯一key属性，避免React渲染警告
        <Tag key={index} text={tag} />
      ))}
    </div>
  )
}

额外提示 #

如果你的tags数组中的每个元素有唯一标识（比如id），建议用这个唯一标识作为key，比用数组索引更稳定，能避免组件复用导致的异常。

内容的提问来源于stack exchange，提问作者Lucas Mahé