错误：应该有一个队列。这可能是 React 中的一个错误。请提出问题

Question

我在用react-i18next。有时 init 函数组件面临 React 问题。知道是什么原因造成的吗？

我的配置

import i18n from "i18next";
import resources from "./locales";
import { initReactI18next } from "react-i18next";

const options = {
  debug: false,
  lng: "en",
  resources: resources,
  fallbacking: "en",
};

i18n.use(initReactI18next).init(options);

export default i18n;

我的版本

"react": "^16.13.1",
"react-i18next": "^11.7.2",

Answer 1

由我自己发起的愚蠢错误。我在返回 dom 组件之前简单声明，例如

const test = (props)=>{
  if(props.test){
     return <p>test</p>
  }
   const { t } = useTranslation("Test");//this must be on very top
  return <p>Main {t('test_variable')}</p>
}

我希望React在记录错误时能更清楚

Answer 2

你可以尝试这个配置，它非常适合我

 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";  
 import { initReactI18next, Trans } from "react-i18next";
 import lang from "assets/lang";

 i18n.use(LanguageDetector)
 .use(initReactI18next)
 .init({
// we init with resources
 resources: lang,
 fallbackLng: "en",
 debug: true,

// have a common namespace used around the full app
 ns: ["basic"],
 defaultNS: "basic",

keySeparator: false, // we use content as keys

interpolation: {
  escapeValue: false,
},
 });

window.document.body.dir = i18n.t("dir");

  export default i18n;

  const Tr = (props) => (
  <Trans i18nKey={props.tr} {...props}>
  {props.children}
 </Trans>
  );

  Tr.tr = (key, ...rest) => i18n.t(key, ...rest);

 export { Tr };