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

Question

我在这里从 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>
)

}

导出默认帖子

谁能帮帮我？？

Answer 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} /> )
        });
        
}