TypeError：_nextProps.children 不是函数
Posted
技术标签:
【中文标题】TypeError：_nextProps.children 不是函数【英文标题】：TypeError: _nextProps.children is not a function 【发布时间】：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;
我到处搜索，但没有找到解决办法，谢谢回答
【问题讨论】：
*** 不允许我发布上下文代码，它说您发布的主要是代码...但我确定问题出在 _App.js，这是我使用 DataContextProvider 的唯一地方...跨度>function MyApp( component: Component, ...pageProps ) ...
@meine 它没有工作仍然得到同样的错误
你能提供一个minimal reproducible example吗？
【参考方案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（不区分大小写） 您可能假设组件没有子组件
【讨论】：
以上是关于TypeError：_nextProps.children 不是函数的主要内容，如果未能解决你的问题，请参考以下文章
TypeError：“__ensemble__”对象不可调用
TypeError: __init__() 得到了一个意外的关键字参数“评分”
TypeError: __init__() 接受 2 个位置参数，但给出了 4 个
TypeError: __init__() 接受 1 个位置参数，但给出了 3 个