Блог

Я использую react i8next и использую его для перевода с английского на арабский язык с помощью большого приложения react в нашем приложении у нас есть модуль, который мы создали, и он называется модулем аутентификации, и у него есть собственный пользовательский интерфейс и собственный перевод.файлы json

Я создал пользовательский хук , который использует каждый отдельный модуль конфигурации i8next, и инициализирует i8next внутри этого пользовательского хука проблема в том, что, когда пользователь нажимает кнопку, чтобы изменить язык, приложение переходит в бесконечный цикл, и язык не меняется, пока я не сделаю обновление

моя базовая конфигурация i8next

 import i18next from "i18next"; import { initReactI18next } from "react-i18next"; import LanguageDetector from 'i18next-browser-languagedetector'; import HttpApi from 'i18next-http-backend';  const config = {  supportedLngs: ['en', 'ar'],  fallbackLng: "en",   detection: {  order: ['subdomain', 'path', 'cookie', 'htmlTag'],  caches: ['cookie'],  },  resources: {   },   react: { useSuspense: true },  } function init(config: any) {  i18next  .use(initReactI18next) // passes i18n down to react-i18next  .use(LanguageDetector)  .init(config)  console.log("inited")  return i18next; }  i18next  .use(initReactI18next) // passes i18n down to react-i18next  .use(LanguageDetector)  .init(config)   export default i18next;  

мой-пользовательский код крючка

 import { useEffect, useState } from "react" import i18next from "../config/translate" import { useTranslation } from "react-i18next"     export const useTranslator = (resources?: any) =gt; {  // @ts-ignore(resources)  i18next.init(resources)  // i18next.createInstance(resources)  const { t, } = useTranslation()  const [currentLang, setCurrentLang] = useState(i18next.language)   useEffect(() =gt; {  document.body.dir = i18next.dir(currentLang)  console.log(i18next);  // setCurrentLang(i18next.language)  }, [currentLang])   return {  t,  currentLang,  i18next   // lang, setLang, url, changeLanguage, t  } }  

the component that uses the custom hook and add it is own config

 const resources = {  en: {  translation: enTrans  },  ar: {  translation: arTrans  }   }  const config = {  supportedLngs: ['en', 'ar'],  resources,  fallbackLng: "en",  detection: {  order: ['subdomain', 'path', 'cookie', 'htmlTag'],  caches: ['cookie'],  },   react: { useSuspense: true },   }  const { t } = useTranslator(config)  useEffect(() =gt; {  console.log("renderdcx");  }, [])  return (  lt;gt;  lt;h1gt; Errors : {error} lt;/h1gt;  lt;h1gt; {t("login.name")}: {displayName}lt;/h1gt;  lt;h1gt; {t("login.email")}: {email} lt;/h1gt;  lt;/gt; )