React中.map函数遍历组件不渲染问题求助

你的代码存在两个核心问题，导致组件无法渲染：

1. 函数组件的props接收方式错误
   函数组件的参数是一个props对象，而非单独的data和key。你当前写的(data, key)会把整个props对象赋值给data变量，key会被解析为undefined，且key是React用于列表渲染的特殊属性，不需要在组件参数中接收。

2. 子组件未返回JSX元素
   子组件中的JSX代码没有通过return语句返回，组件自然不会输出任何内容。

修正后的子组件代码 #

export const OrganizationCard = ({ data }) => {
    console.log(data);
    return (
        <article className={styles.mainContainer}>
            <p>organization</p>
        </article>
    )
}

补充说明 #

父组件的遍历逻辑没有问题，修正子组件的上述两个问题后，.contentList容器内就能正常渲染<OrganizationCard />组件了。

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