react项目中的国际化--react-intl-universal

这其实应该是一篇使用教程，但是因为一句代码，变成了踩坑......很难受

名词解释

react-intl-universal: is a React internationalization package developed by Alibaba Group.

这里我就不翻译了

使用教程

直接上代码

//  这里是插件的部分
import React, { FC, useState, useEffect } from "react";

import intl from "react-intl-universal";
require("intl/locale-data/jsonp/en.js");
require("intl/locale-data/jsonp/zh.js");
//  国际化语言包，这里是自建的部分
const locales: any = {
  "en-us": require("./locales/EN-US.json"),
  "zh-cn": require("./locales/ZH-CN.json"),
  "zh-tw": require("./locales/ZH-TW.json"),
};
const App: FC = () => {
  //  浏览器默认语言
  const defaultl: string = navigator.language.toLowerCase() || "";
  let defaultLang: string = "";
  //  简体中文  这里是赠送部分，因为我需要判断浏览器默认语言，所以整理了一下大概的
  if (
    defaultl === "zh-cn" ||
    defaultl === "zh-chs" ||
    defaultl === "zh-chs-cn" ||
    defaultl === "zh-hans" ||
    defaultl === "zh-hans-cn"
  ) {
    defaultLang = "zh-cn";
    //  繁体中文：台湾、香港、澳门
  } else if (
    defaultl === "zh-tw" ||
    defaultl === "zh-hk" ||
    defaultl === "zh-mo" ||
    defaultl === "zh-cht" ||
    defaultl === "zh-cht-cn" ||
    defaultl === "zh-hant" ||
    defaultl === "zh-hant-cn"
  ) {
    defaultLang = "zh-tw";
    //  英文：其他
  } else {
    defaultLang = "en-us";
  }
 //  state
const [initDone, setinitDone] = useState(false);
const [lang, setlang] = useState(localStorage.getItem("lang") || defaultLang);
useEffect(() => {
    //  第一次渲染语言的空白
    localStorage.setItem("lang", lang);
  }, [lang]);
 //  下面是使用插件的部分
useEffect(() => {
  loadLocales();
});
 onst loadLocales = () => {
  let currentLocale = intl.determineLocale({
//这里可以看我后面附的官方参考文档，我是使用localstorage的方式，还有cookies和url配参数的方式
    localStorageLocaleKey: "lang",
  });
  intl
    .init({
      currentLocale,
      locales,
    })
    .then(() => {
      setinitDone(true);
    });
};
//  切换语言
  const changelang = (newlang: string) => {
    if (lang === newlang) return;
    setlang(newlang);
  };
return (/*这里面就是需要渲染的dom*/)
}
export default App;

这代码上的我有点无聊了，不过基本上就是使用这个插件比较完全的部分了。
那么问题来了

坑在哪里？

现在能实现语言切换的操作了，但是你会发现，总是拿到上一次的语言，然而localstorage里面又是正常的。绞尽脑汁，找到一种不那么好的方式：

const changelang = (newlang: string) => {
    if (lang === newlang) return;
    setlang(newlang);
    window.location.reload();  //添加这一句话
  };

强制刷新页面，读取到最新的值，其实注意观察官方文档采用的url传参的方式，个人认为最后的

location.search = `?lang=${lang}`;

这句代码也是让浏览器识别url变化之后强制刷新页面

欢迎指正，欢迎延申

参考

npm包+教程
 官网使用教程