在地图中反应地图

Question

      {posts.map((post) =>
        posts.comments?.map((comment) => (
          <Posts key={post._id} post={post} comment={comment} />
        ))
      )}

我希望能够做这样的事情，我循环遍历 posts 和评论并将每条评论和 post 作为 prop 到 Posts 组件，但它不起作用，我该怎么做？

Answer 1

使用您的代码，您可以将每条评论分别发送到您的帖子组件，并为每条评论创建一个帖子组件。

我认为你的 posts 数组是这样的：

const posts = [{id: 1, comments: [], name: 'post_name', ...}, {...}, ]

所以你只需要一张地图

posts.map(post => {
    return (
        <Posts key={post._id} post={post}/>
    )
})

并且在帖子组件中，您有“post”作为道具。只需将您的 post.comments 映射到此处：

帖子的功能组件示例：

const Posts = ({post}) => {
...

return (
    post.comments.length > 0 && (
        post.comments.map(comment => {
            return (
               <div>{comment}<div/>
            )
        })
    )
)}

Answer 2

您需要在第一个映射函数中将 posts.comments 更改为 post.comments。我假设数组 comments 在主数组的每个对象中。

{posts.map((post) =>
    post.comments?.map((comment) => (
      <Posts key={post._id} post={post} comment={comment} />
    ))
  )}

在地图中反应地图

React map inside map

reactjs

nested-loops

map-function