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

Question

我一直在使用 React-Admin v2，现在是时候升级到下一个主要版本了。我的应用程序具有在页面加载时更改登录页面语言的功能，例如根据网址参数。如果没有设置任何参数，则语言将为英语，但如果 URL 为 myproject.tld/login/fi，则语言将为芬兰语。通过使用动作创建者componentDidMount分派动作来更改语言。CHANGE_LOCALEchangeLocale

但是，我已阅读升级指南，它说翻译系统将不再以相同的方式工作，它不再使用 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设置为使用英语的语言吗？

Answer 1

因此，您基本上是在尝试在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>
);