在 next.js 中，使用 `foreach` 遍历数组并尝试内联渲染 react 组件会导致无输出，因其不返回新数组；应改用 `map()` 并为每个元素提供唯一 `key` 才能正确批量渲染组件。
React（以及 Next.js）要求动态生成的组件列表必须由返回 JSX 元素数组的函数生成，且每个元素需携带稳定、唯一的 key 属性，以帮助 React 高效更新 DOM。而 Array.prototype.forEach() 的设计目标是执行副作用（如日志、状态修改），其始终返回 undefined，因此在 JSX 中写成 {tags.forEach(...) 实际等价于 {undefined}，自然不会渲染任何内容。
正确的做法是使用 Array.prototype.map() —— 它会遍历数组并返回一个新数组，其中每个元素都是你映射后的 JSX 组件。同时，切记为每个 <Tag /> 添加 key，否则控制台将报错（React 18+ 严格模式下会警告）：
// components/Block.tsx
import Tag from "./Tag";
export default function Block({ tags, name }: { tags: string[]; name: string }) {
return (
<section>
<div></div>
<h2>{name}</h2>
<div>
{tags.map((tag, index) => (
<Tag key={index} val={tag} />
))}
</div>
</section>
);
}⚠️ 注意：虽然用 index 作 key 在简单、静态、顺序不变的列表中可临时工作，但不推荐用于可能增删/排序的列表（如用户交互后重新排序）。更健壮的方式是确保 tags 数组中的每一项本身具备唯一标识（例如 id 字段），或使用 tag 值（仅当所有 tag 字符串互不重复且稳定时）：
// ✅ 更佳实践（假设 tag 值唯一且不可变）
{tags.map(tag => (
<Tag key={tag} val={tag} />
))}最后，确认你的 Tag 组件也符合最佳实践（避免无意义的 <></> 包裹，除非需要多根节点；此处单 <p> 可直接返回）：
// components/Tag.tsx
export default function Tag({ val }: { val: string }) {
return <p className="inline-block bg-gray-100 px-3 py-1 rounded text-sm">{val}</p>;
}总结：
- ❌ forEach → 返回 undefined，不能用于 JSX 渲染；
- ✅ map → 返回 JSX 数组，是渲染列表的标准方式；
- ✅ 必须添加 key，优先使用数据唯一 ID，次选稳定字符串值，慎用索引；
- ✅ 类型标注（如 tags: string[]）提升可维护性，Next.js + TypeScript 组合强烈推荐。
