在 next.js 中，使用 `foreach` 方法无法在 jsx 中渲染数组元素，应改用 `map` 方法——它返回新数组并支持 jsx 元素生成，同时需为每个元素提供唯一 `key` 属性以满足 react 渲染规范。
在 React（及基于它的 Next.js）中，JSX 渲染要求表达式必须返回可渲染的 React 元素。Array.prototype.forEach() 的设计目的是执行副作用（如日志、状态更新），其返回值恒为 undefined，因此写成 {tags.forEach(tag =>
正确做法是使用 Array.prototype.map()：它遍历数组并返回一个新数组，其中每个元素都是你指定的 JSX 组件，且 React 要求该数组中的每个元素必须带有 key 属性，用于高效更新 DOM。
以下是修正后的完整代码示例：
✅ components/Tag.jsx（推荐使用 .jsx 后缀明确标记 JSX 文件）：
export default function Tag({ val }) {
return <span className="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm mr-2">{val}</span>;
}✅ components/Block.jsx（关键修复：map + key）：
import Tag from './Tag';
export default function Block({ tags, name }) {
return (
<section className="mb-8 p-4 border border-gray-200 rounded-lg">
<div></div>
<h2 className="text-xl font-bold mb-3">{name}</h2>
<div className="flex flex-wrap gap-2">
{tags.map((tag, index) => (
<Tag key={index} val={tag} />
))}
</div>
</section>
);
}⚠️ 注意事项：
- key 必须存在且稳定：此处使用 index 仅适用于 tags 数组顺序固定、无增删重排的简单场景；若标签可能动态变化（如过滤、排序），请改用唯一标识（例如 tag.id 或 tag 字符串本身，前提是确保不重复）。
- 避免在 map 外部解构或副作用：保持 map 内部纯函数式渲染，逻辑处理（如条件过滤）应在 map 前完成，例如：{tags.filter(t => t).map(...)}
- 语义化与可访问性：
✅ 最终在 app/page.jsx（Next.js 13+ App Router）中调用：
import Block from './components/Block';
export default function Home() {
return (
<main className="container mx-auto px-4 py-8">
<Block tags={["Webflow", "UI Design"]} name="Projet 1" />
<Block tags={["React", "TypeScript", "Next.js"]} name="Dashboard App" />
</main>
);
}总结：forEach ≠ 渲染工具，map + key 是 React 列表渲染的黄金组合。掌握这一模式，是构建动态项目展示页、卡片网格、标签云等常见 UI 的基础能力。
