Reactjs JSX表达式必须有一个父元素nextjs

我正在使用nextjs/reactjs创建这个。我正在关注youtube视频教程，在教程中，他也做了同样的事情，这对他来说很有效，但对我来说不起作用

有什么想法吗

const Index=（道具）=>{
const{posts}=props；
返回(
{posts.map（post=>(
{post.title}
{post.body}

))
}
)
}
Index.getInitialProps=async（）=>{
常量数据=等待获取（'https://jsonplaceholder.typicode.com/posts');
const result=wait data.json（）；
返回{
职位：结果
}
}
出口违约指数；

React不支持返回多个组件，因此需要将它们包装到父组件中。为此，React提供了

片段

或

的速记语法。将您的返回声明更改为此，它将起作用：

return(
    <div>
        {posts.map( post => (
          <>
            <h1>{post.title}</h1>
            <p>{post.body}</p>
          </>
        ))
        }
    </div>
  )

返回(
{posts.map（post=>(
{post.title}
{post.body}

))
}
)