本文讲解如何基于 TypeScript 接口定义的药物数据，使用 filter 筛选特定类别（如 "Oral"），并在 React 组件中安全、完整地渲染过滤后的对象列表，避免类型错误与 Key 警告。
本文讲解如何基于 typescript 接口定义的药物数据，使用 `filter` 筛选特定类别（如 "oral"），并在 react 组件中安全、完整地渲染过滤后的对象列表，避免类型错误与 key 警告。
在 React + TypeScript 项目中，当你定义了强类型的接口（如 Med）并创建对应的数据数组后，对数组进行筛选（如按 drugClass 过滤）是常见需求。但直接将整个对象 {item} 作为 JSX 子元素渲染会触发 TypeScript 错误：Type 'Med' is not assignable to type 'ReactNode'——因为 React 不知道如何将一个普通 JavaScript 对象“变成”可显示的 DOM 内容。
正确的做法是显式解构并渲染对象的字符串属性。例如，在 <li> 中分别输出 item.name、item.dosage 和 item.drugClass：
<ul className="list-group">
{filteredOralData.map((item) => (
<li key={item.name}>
Name: {item.name} | Dosage: {item.dosage} mg | Drug Class: {item.drugClass}
</li>
))}
</ul>⚠️ 关键注意事项：
- 必须提供 key 属性：React 要求列表项有唯一且稳定的 key。此处使用 item.name 是可行的（前提是名称不重复）；若存在重名风险，建议改用唯一 ID 字段（如添加 id: string 到 Med 接口并用 item.id 作 key）。
- 避免直接渲染对象：{item} 无效，{JSON.stringify(item)} 虽可临时调试，但不适用于生产环境的用户界面。
- 类型安全增强：可在 filter 后添加类型守卫，确保 drugClass 值合法（尤其当 medForm 是联合字面量类型时）：
type medForm = 'Oral' | 'Injectable' | 'Topical';
// filter 可进一步强化为：
.filter((med): med is Med & { drugClass: 'Oral' } => med.drugClass === 'Oral')最后，推荐将渲染逻辑封装为独立组件（如 <MedItem />），提升可复用性与可维护性。这样既保持类型安全，又使 UI 结构清晰、易于测试与扩展。
