TypeError: _nextProps.children is not a function

Question

我正在尝试将 react context 与 nextJS 结合使用，但出现此错误：

Server Error
TypeError: _nextProps.children is not a function

我的_App.js:

import Head from "next/head";
import Router from "next/router";
import { Provider } from "next-auth/client";
import DataContextProvider from "../data/data-context";
import Layout from "../components/layout/layout";
import "../styles/globals.css";


function MyApp({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>
      <DataContextProvider>
        <Layout>
          <Head>
            <meta name="description" content="Uploader" />
            <meta
              name="viewport"
              content="initial-scale=1.0, width=device-width"
            />
          </Head>
          <Component {...pageProps} />
        </Layout>
      </DataContextProvider>
    </Provider>
  );
}

export default MyApp;

找遍了都没有找到解决办法，谢谢解答

Answer 1

在您的项目中搜索 props.children（不区分大写）您可能假设该组件有子组件，但实际上它没有

Answer 2

您可能会收到此错误的一个原因是您尝试呈现上下文本身，而不是上下文提供程序。

这在服务器端失败并出现错误 TypeError: _nextProps.children is not a function，如果在客户端出现错误 TypeError: render is not a function：

import { createContext } from 'react';

const Context = createContext('');

function App() {
  return <Context value="" />
}

改为渲染提供程序将起作用：

function App() {
  return <Context.Provider value="" />
}

在你的具体例子中，你这样做

import DataContextProvider from "../data/data-context";

并渲染

<DataContextProvider>
  ...
</DataContextProvider>

有没有可能你所说的DataContextProvider实际上只是一个上下文？不看data/data-context.

里面的代码是不可能知道的

TypeError: _nextProps.children is not a function

TypeError: _nextProps.children is not a function

javascript

reactjs

next.js

react-context

react-hooks