Nextjs - Reactjs - 不变违规：React.Children.only 预期接收单个 React 元素子元素

Question

我正在使用 Nextjs 和 Reactjs。我已经为我的应用程序 UI 设置了 Layout.js 文件。

我想知道为什么我的控制台 returns 我：

Invariant Violation: React.Children.only expected to receive a single React element child.

这是我的 layout.js：

export default ({ children, title = 'This is the default title' }) => (
    <div>
        <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        </Head>
        <div className={style.layout}>
            <div>
                <div className={style.header}>
                    <div className= {style.headbar}> 
                        <div className={style.headerLeft}>
                            <Logo className={style.logo}/> 
                        </div>
                        <div className={style.headerRight}>
                            <MenuContainer className={style.menu}/> 
                        </div>
                    </div>
                    <div className={style.chatbox}> 
                        <ChatContainer/>
                    </div>
                </div> 

                { children }

                <div className={style.footer}> 
                    <Link to="/quote" className={style.quote}> 
                        Click here
                    </Link>
                    <SocialMedia/>
                    <Subscription/>
                </div>
            </div>
        </div>
    </div>
)

我的wrappedComponent.js：

const Index = () => (
      <Provider store={store}> 
            <Layout> 
                  <Home/>
            </Layout>
      </Provider>
)

我不知道哪里出了问题，在我看来一切都很好，如果有人有任何提示，那就太好了。

谢谢。

Answer 1

问题是我的数据结构对应于另一个框架。所以有一些微小的细节让 NextJS 崩溃——比如我的 React 链接中的 "props" 调用，这类东西。因此，如果有人遇到同样的问题，请仔细检查框架数据结构的配置

Nextjs - Reactjs - 不变违规：React.Children.only 预期接收单个 React 元素子元素

Nextjs - Reactjs - Invariant Violation: React.Children.only expected to receive a single React element child

javascript

reactjs

next.js