react js map功能无法渲染自定义组件

Posted 2023-02-21

【中文标题】react js map功能无法渲染自定义组件

【英文标题】：react js map function can not render the custom component

【发布时间】：2022-01-23 13:46:27

【问题描述】：

我在这里从 firestore 获取帖子数据并将其显示给我自己的自定义组件。

这里是map函数的代码：

posts.map(( id, data:  name, description, message, photoUrl  ) => 
            console.log("data: ", name);
            <Post
                key=id
                name=name
                description=description
                message=message
                photoUrl=photoUrl />
        )

这是我的自定义组件代码：

function Post( name, description, message, photoUrl ) 
console.log("Function Call");
return (
    <div className='post'>
        <div className="post__header">
            <Avatar />
            <div className="post__info">
                <h2>name</h2>
                <p>description</p>
            </div>
        </div>
        <div className="post__body">
            <p>message</p>
        </div>
        <div className="post__buttons">
            <InputOption Icon=ThumbUpAltOutlinedIcon
                title='Like' color="gray" />
            <InputOption Icon=ChatOutlinedIcon
                title='Comment' color="gray" />
            <InputOption Icon=ShareOutlinedIcon
                title='Share' color="gray" />
            <InputOption Icon=SendOutlinedIcon
                title='Send' color="gray" />
        </div>
    </div>
)

导出默认帖子

谁能帮帮我？？

【问题讨论】：

传递给map的回调不是returning任何东西

【参考方案1】：

ma​​p函数要求回调函数返回一个对象。

你的代码应该是这样的。

       posts.map(( id, data:  name, description, message, photoUrl  ) => 
            console.log("data: ", name);
             return  (  <Post
                      key=id
                      name=name
                      description=description
                      message=message
                      photoUrl=photoUrl /> )
        );
        

【讨论】：

谢谢，这对我有用。

@RoshanRabadiya 如果它适合你，请接受答案。