Question

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

我想知道为什么我的控制台会返回我：

不变违规：React.Children。仅预期会收到一个反应元素孩子。

这是我的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>
)

我的wrapperComponent.js：

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

我不知道出什么问题了，在我看来，一切都很好，如果有人有任何暗示，那会很好，

thanks

Answer 1

问题是我的数据结构对应于另一个框架。因此，存在一些使NextJS崩溃的微小细节-例如我的React Links中的“ props”调用，这类东西。因此，如果有人遇到相同的问题，请仔细检查框架数据结构的配置

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

1 个答案: