本文讲解如何基于 typescript 接口定义的药物数据，使用 filter 筛选特定类别（如 "oral"），并在 jsx 中安全、完整地渲染结果列表，重点解决“类型 'med' 不能赋值给 'reactnode'”的常见错误。
本文讲解如何基于 typescript 接口定义的药物数据，使用 filter 筛选特定类别（如 "oral"），并在 jsx 中安全、完整地渲染结果列表，重点解决“类型 'med' 不能赋值给 'reactnode'”的常见错误。
在 React + TypeScript 项目中，当你定义了一个接口（如 Med）并用其实例构成数组（如 medications: Med[]），后续进行过滤（如按 drugClass 筛选）后，不能直接将整个对象 {item} 作为 JSX 子元素渲染——因为 React 要求 children 必须是字符串、数字、JSX 元素等可渲染的 ReactNode，而原始对象 Med 类型不满足该约束，因此会报错：
Type 'Med' is not assignable to type 'ReactNode'.
✅ 正确做法是：显式提取并渲染对象的可展示字段，同时为每个列表项添加唯一 key（推荐使用稳定标识，如 item.name 或 item.dosage + item.name 组合，避免仅用索引）。
以下是完整的、可直接运行的渲染示例：
// 在 page.tsx 中
import { Med, medications } from "./Medications";
export default function Home() {
const filteredOralData = medications.filter(
(med) => med.drugClass === "Oral"
);
return (
<div>
<h2>口服类药物清单</h2>
<ul className="list-group">
{filteredOralData.map((item) => (
<li key={item.name} className="list-group-item">
<strong>{item.name}</strong> —
剂量：{item.dosage} mg |
适用动物：{item.forDog ? "犬" : ""}{item.forDog && item.forCat ? " / " : ""}{item.forCat ? "猫" : ""}
</li>
))}
</ul>
</div>
);
}? 关键要点总结：
- ✅ map() 内必须返回合法 JSX（如 <li>...</li>），不可直接写 {item}；
- ✅ 每个列表项 <li> 必须带 key 属性，且值需在列表中唯一、稳定（避免使用 index，尤其当列表可能增删时）；
- ✅ 可结合条件渲染（如 item.forDog && "犬"）提升信息可读性；
- ⚠️ 若 drugClass 是联合字面量类型（如 type medForm = "Oral" | "Topical" | "Injectable";），建议在 filter 中使用类型守卫或 as const 确保编译时类型安全；
- ? 进阶提示：可封装为可复用组件，如 <MedList drugs={filteredOralData} />，进一步解耦逻辑与视图。
通过以上方式，你既能保持类型安全，又能清晰、健壮地呈现过滤后的结构化数据。
