React中通过map函数渲染子组件页面空白问题

你的问题出在SwipeView.tsx的列表渲染逻辑里，有两个关键问题：

1. 未正确返回并渲染子组件 #

在contents.map的回调函数中，你直接调用ContentCard({content})，既没有用JSX语法渲染组件，也没有返回这个调用结果，导致map最终返回的是全为undefined的数组，页面自然没有内容。

2. 缺少列表渲染必需的key属性 #

React要求列表中的每个子元素必须有唯一的key属性，这是React识别列表项变化的标识，虽不会直接导致空白，但属于规范要求，能避免后续潜在问题。

修改后的SwipeView.tsx代码： #

import {Content} from "../DataDomain/Entities/Content";
import ContentCard from "./ContentCard";

interface SwipeViewProps {
    contents: Content[];
}

function SwipeView({ contents }: SwipeViewProps): JSX.Element {
    return <> 
        {contents.map(content => (
            <ContentCard key={content.id} content={content} />
        ))} 
    </>
}

export default SwipeView;

说明： #

• 使用JSX语法<ContentCard />渲染组件，替代直接调用函数的方式
• 给每个ContentCard添加key属性，这里假设你的Content类型有唯一的id字段；如果没有，临时可用数组索引（不推荐长期使用）
• 箭头函数用括号()直接返回JSX元素，省略return关键字，写法更简洁

内容的提问来源于stack exchange，提问作者Mathmeeeeen