gpt4 book ai didi

reactjs - 使用react-i18next useTranslationHooks时为"i18next backendConnector: loading namespace failed"

转载 作者:行者123 更新时间:2023-12-03 14:25:09 25 4
gpt4 key购买 nike

我正在尝试使用 useTranslation() Hook 在我的 create-react-app 应用程序上实现 React-i18next。

但是在控制台中,显示 Debug模式

i18next::backendConnector: loading namespace billingAddress for language en failed failed parsing /locales/en/billingAddress.json to json

i18next::translator: missingKey en billingAddress Form.email Customer Email (Default)

i18next.ts

import {initReactI18next} from "react-i18next";
import i18next from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import XHR from "i18next-xhr-backend";

i18next
// .use(Backend)
.use(LanguageDetector)
.use(XHR)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
lng: "en",
fallbackLng: {
'en-US':['en'],
'zh-CN':['cn'],
default:['en']
},
debug: true,
ns: ['billingAddress'],
defaultNS: 'billingAddress',
// load: "currentOnly",
interpolation: {
escapeValue: false // react already safes from xss
},
keySeparator: false,
// backend: {
// loadPath: "/locales/{{lng}}/{{ns}}.json",
// crossDomain: true
// },
react: {
wait: true,
}
});

export default i18next;

文件

├── src
│   ├── i18next.ts
│   ├── locales
│   │   ├── cn
│   │   │   └── billingAddress.ts
│   │   └── en
│   │   └── billingAddress.ts
│   ├── index.tsx

版本

"react": "^16.8.4",

"i18next": "^15.0.7",

我的翻译文件

export default{
"Form": {
"emailLabel": "customer Email",
"emailPlaceholder": "email@emial.com",
}
}

我的账单地址文件

  const [t, i18n] = useTranslation();

const changeLanguage = (language: string) => (e: React.MouseEvent) => {
i18n.changeLanguage(language)
};

const someValues: billingAddress = {
emailLabel: t("Form.emailLabel","Customer Email")
}

return (
<div>
<button onClick={changeLanguage("en")}>English</button>
<OtherComponent value={someValues} />
</div>
)

我现在很困惑如何加载命名空间......有什么想法吗?

提前致谢!

最佳答案

您可以按照此处的示例进行操作:https://github.com/i18next/react-i18next/tree/master/example/react/public/locales

使用 xhr 后端,您需要提供有效的 JSON 文件作为源 - 仅此而已。

关于reactjs - 使用react-i18next useTranslationHooks时为"i18next backendConnector: loading namespace failed",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55350136/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com