TypeError：_nextProps.children 不是函数答案

【问题标题】：TypeError: _nextProps.children is not a functionTypeError：_nextProps.children 不是函数
【发布时间】：2021-08-12 08:11:43
【问题描述】：

我正在尝试将 react 上下文与 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;

我到处搜索，但没有找到解决办法，谢谢回答

【问题讨论】：

stackoverflow 不允许我发布上下文代码，它说您发布的主要是代码...但我确定问题出在 _App.js，这是我使用 DataContextProvider 的唯一地方...跨度>
function MyApp({ component: Component, ...pageProps }) {...
@meine 它没有工作仍然得到同样的错误
你能提供一个minimal reproducible example吗？

标签： javascript reactjs react-hooks next.js react-context

【解决方案1】：

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

这会失败并在服务器端出现错误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里面的代码是不可能的。

【讨论】：

【解决方案2】：

在您的项目中搜索 props.children（不区分大小写）您可能假设组件没有子组件

【讨论】：