页面根据数据变化

{isLoading && <Spinner />}
{error ? <ErrorMessage /> : <Canvas />}
{projects.map(project => <ProjectCard key={project.id} project={project} />)}

• &&：左边为真才显示右边。
• ? :：条件为真显示前者，否则显示后者。
• .map()：把数组每一项变成一个组件。
• key：帮助 React 稳定识别列表项，优先使用真实唯一 ID。

manga_studio/ProjectManager.tsx 用 sortedProjects.map(...) 生成真实项目卡片。

列表为什么不应优先使用数组下标作为 key？

答案：插入、删除或排序时下标会变化，React 可能把不同项目当成同一个；稳定 ID 更可靠。