Next.js 13 Context 导致 \"Argument of type \'({ children }: { children: any; }) => Element\' is not assignable to parameter of type \'Context<unknown>\'答案

【问题标题】：Next.js 13 Context causes "Argument of type '({ children }: { children: any; }) => Element' is not assignable to parameter of type 'Context<unknown>'Next.js 13 Context 导致 \"Argument of type \'({ children }: { children: any; }) => Element\' is not assignable to parameter of type \'Context<unknown>\'
【发布时间】：2023-02-15 17:10:51
【问题描述】：

当我尝试在我的 Next.js 13 应用程序中使用 Context 时，我收到错误“Argument of type '({ children }: { children: any; }) => Element' is not assignable to parameter of type 'Context'。

这是我的上下文 store.tsx 代码：

'use client';

import { createContext, Dispatch, SetStateAction, useState } from "react";

interface ContextProps {
    userId: string,
    setUserId: Dispatch<SetStateAction<string>>,
    data: object[],
    setData: Dispatch<SetStateAction<object[]>>
}

const GlobalContext = createContext<ContextProps>({
    userId: '',
    setUserId: (): string => '',
    data: [],
    setData: (): object[] => [] 
})

export const GlobalContextProvider = ({ children }) => {
    const [userId, setUserId] = useState('');
    const [data, setData] = useState<[] | object[]>([]);
    
    return (
        <GlobalContext.Provider value={{ userId, setUserId, data, setData }}>
            {children}
        </GlobalContext.Provider>
    )
};

export default GlobalContextProvider;

如果您将鼠标悬停在 store.tsx 代码中的“children”上，我会收到此错误：“(parameter) children: any 绑定元素‘children’隐式地具有‘any’类型。”

这是我的根 layout.tsx 代码：

import './globals.css';
import GlobalContextProvider from './Context/store';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head />
      <body>
        <GlobalContextProvider>{children}</GlobalContextProvider>
      </body>
    </html>
  )
}

这是带有错误的 page.tsx 代码：

'use client';

import { useContext, useEffect } from 'react';
import GlobalContextProvider from './Context/store';
import styles from './page.module.css';

export default function Home() {
  const { userId, setUserId } = useContext(GlobalContextProvider);

  return (
    <div className={styles.container}>
      
    </div>
  )
}

我究竟做错了什么？我该如何修复错误？

【问题讨论】：

标签： reactjs next.js react-context

【解决方案1】：

我必须在 store.tsx 文件中使用 useContext。我将其添加到 store.tsx 文件的底部：

export const useGlobalContext = () => useContext(GlobalContext);

然后在 page.tsx 文件中，我以这种方式导入了上下文：

import { useGlobalContext } from './Context/store';

并以这种方式访问它：

const { userId, setUserId } = useGlobalContext();

【讨论】：

【解决方案2】：

改变这个：

import GlobalContextProvider from './Context/store';

对此：

import { GlobalContextProvider } from './Context/store';

【讨论】：