在React-Admin v3中设置页面加载的语言环境

问题描述

我一直在使用React-Admin v2，现在是时候升级到下一个主要版本了。我的应用程序具有在页面加载时更改登录页面语言的功能，例如，取决于url参数。如果未设置任何参数，则语言将为英语，但是如果URL为例如myproject.tld / login / fi，则语言将为芬兰语。通过使用componentDidMount动作创建者调度CHANGE_LOCALE动作，可以在changeLocale中更改语言。

但是，我已经阅读了升级指南，它说翻译系统将不再以相同的方式工作，no longer uses redux。我已经能够熟悉新系统，并且设法创建了用于语言更改的按钮，并且该按钮可以正常工作。创建语言环境切换器功能并在其中使用钩子useSetLocale很容易。

但是，我仍然遇到这种情况，必须立即更改语言而无需任何用户操作，这意味着单击按钮。如果我无法根据链接用户单击并登陆到站点的链接来翻译登录页面，我可以接受这一事实。默认值为英语，如果用户希望以其他语言查看登录表单，则可以在右上角创建语言链接。

更重要的是在用户登录后更改UI语言。每个用户的所选语言都保存在后端的用户对象中，成功登录后，我的React应用程序会知道该语言代码。

主要问题：登录后仅在加载所有内容后如何更改语言？如果我正确理解，则不能在componentDidMount中使用钩子。我目前知道的更改语言的方法是1.钩子useSetLocale和2.在App.js文件中初始化它，如下所示：

import * as React from "react";
import { Admin,Resource } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import jsonServerProvider from 'ra-data-json-server';
import UserList from './users';
import englishMessages from 'ra-language-english';
import finnishMessages from 'ra-language-finnish';

const messages = {
    fi: finnishMessages,en: englishMessages,};

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const i18nProvider = polyglotI18nProvider(locale => messages[locale],"en");

const App = () => (
    <Admin
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
    >
        <Resource name="users" list={UserList} />
    </Admin>
);

export default App;

当然这只是一个测试代码，并且该代码当前未使用我真正的后端。但是，成功登录后以及知道用户选择的语言后，是否可以更改语言？是否有第三种方法可以强制使用该语言，或者我可以以某种方式重新初始化默认情况下设置为使用英语的i18nProvider？

解决方法

因此，您基本上是在尝试在authProvider（获得用户偏好）和i18nProvider之间进行通信。 React-admin没有提供任何系统来执行此操作，但是您可以根据需要进行任何操作，例如使用localStorage。

例如，假设您的authProvider在登录时获取了用户区域设置。它应该将其存储在localStorage中：

const authProvider = {
    login: async ({ username,password }) => {
        // fetch the auth API and grab the user locale in the response,then
        localStorage.setItem('locale',locale);
     },// ...
}

接下来，您需要在安装应用程序时执行效果（更改语言环境）。最好的方法是在应用布局中。以下是在另一个在挂载时调用i18nProvider.setLocale()的组件中包装默认布局的方法：

import React,{ useEffect } from 'react';
import { Layout,useSetLocale } from 'react-admin';

const MyLayout = props => {
    const setLocale = useSetLocale();
    useEffect(() => {
        const locale = localStorage.getItem('locale');
        setLocale(locale);
    },[setLocale]); // execute on mount

    return <Layout {...props} />;
}

然后，您只需将自定义布局插入<Admin>组件中，如下所示：

const App = () => (
    <Admin
        layout={MyLayout}
        dataProvider={dataProvider}
        i18nProvider={i18nProvider}
    >
        <Resource name="users" list={UserList} />
    </Admin>
);