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

【问题标题】：JSX expressions must have one parent element nextjsJSX 表达式必须有一个父元素 nextjs
【发布时间】：2020-07-30 23:26:43
【问题描述】：

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

有什么想法吗？

const Index = (props) => {

  const {posts} = props;
  return(
    <div>
        {posts.map( post => (
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        ))
        }
    </div>
  )
}
Index.getInitialProps = async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts');
  const result = await data.json();

  return {
    posts: result
  }
}

export default Index;

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

React 不支持返回多个组件，因此您需要将它们包装在父组件中。为此，React 提供了Fragment 或<> </> 用于简写语法。将您的退货声明更改为此，它将起作用：

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

【讨论】：