Component cannot listen language from context ReactJs i18next

Question

我正在使用i18next来切换语言，我想使用useContext来避免prop drilling，这样项目中的所有组件和页面都可以知道选择的语言，但是我有这个问题是组件无法监听上下文，我搜索了原因并试图解决它但失败了。

我有另一个用于用户身份验证的上下文并且运行良好，我在 languageContext 中执行了相同的步骤但仍然发生错误。

错误：

TypeError：无法读取未定义的属性（读取“handleLanguage”）

上下文页面

import React,{ createContext, useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

const languageContext = createContext();

export function languageContextProvider({ children }) {
    const { i18n } = useTranslation();
    const [language, setLanguage] = useState(i18n.language);
    const [loading ,setLoading] = useState(true);
    function handleLanguage () {

      if(language === 'en')
      {
          i18n.changeLanguage('ar');
          setLanguage('ar');
          setLoading(false)
      }
      else
      {
          i18n.changeLanguage('en');
          setLanguage('en');
          setLoading(false)
      }
  }

  useEffect(() => {
    console.log(language,'lang');
  }, []);

  return (
    <languageContext.Provider
      value={{ language,handleLanguage}}
    >
    {!loading && children}
    </languageContext.Provider>
  );
}

export function useLanguage() {
  return useContext(languageContext);
}

应用页面

import React, { useState } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import Login from "./components/login";
import {UserAuthContextProvider} from './context/userContext'
import AuthRoute from './components/authRoute';
import { languageContextProvider } from "./context/languageContext";
function App() {
  return (
    <languageContextProvider>
    <BrowserRouter>
    <UserAuthContextProvider>
    <Routes>
    <Route path="/" element={<Navigate to='/login' />} />
    <Route path="/login" element={<AuthRoute><Login/> </AuthRoute>} />
    <Route path="/forgotPassword" element={<AuthRoute><Forgot/> </AuthRoute>} />
    <Route path="/cost-center" element={<ProtectedRoute><CostCenterPage/></ProtectedRoute>} />
    <Route path="/cost-center/:id" element={<ProtectedRoute><CostCenterDetails /></ProtectedRoute>} />
    <Route path="/cost-center/:id/:invoiceID" element={<ProtectedRoute><CostCenterDetails /></ProtectedRoute>} />
    <Route path="/admin" element={<ProtectedRoute><Admin /></ProtectedRoute>} />
    <Route path="*" element={<Navigate to="/" />} />
    </Routes>
    </UserAuthContextProvider>
    </BrowserRouter>
    </languageContextProvider>
  );
}

export default App;

索引页

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./css/fonts.css";
import "./css/style.css";
import App from './App';
import Loader from './components/Loader';
import './i18n'

ReactDOM.render(
    <Suspense fallback={Loader}>
        <App />
    </Suspense>,
    document.getElementById('root')
);

i18n 页面

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n.use(Backend).use(LanguageDetector).use(initReactI18next).init({
    fallbackLng: 'ar',
    // lng: 'en',
    debug: true,
    interpolation: {
        escapeValue: false
    }
});

export default i18n;

最后一个组件布局

import React from 'react'
import { useTranslation } from 'react-i18next';
import {useLanguage} from '../context/languageContext'
const Layout = ({children,classBackground}) => {
    const { user,accessAPIs } = useUserAuth();
    const { handleLanguage,language } = useLanguage();
    const {t} = useTranslation();
return("test")
}

我尝试在 reactjs 中使用 useContext 以便所有组件都可以在该上下文中使用变量和函数，但它失败了并且组件无法使用它们。