React TypeScript Hooks执行顺序致语言切换功能异常问题

两个核心问题共同导致了异常：

1. 运算符优先级错误，targetLang计算逻辑完全偏离预期 #

JavaScript运算符优先级规则中，空值合并运算符??的优先级高于三元条件运算符?:，你编写的语言取值代码：

const targetLang = localStorage.getItem('preferredLanguage') ?? navigator.language.includes("es") ? "es" : "cat";

并不会按照「优先读localStorage配置，无配置则判断浏览器语言返回对应值」的逻辑执行，实际会被JS引擎解析为：

// 先执行??运算，再把结果作为三元判断的条件
const condition = localStorage.getItem('preferredLanguage') ?? navigator.language.includes("es");
const targetLang = condition ? "es" : "cat";

由于localStorage中存储的preferredLanguage值是es/cat这类非空字符串，属于强制转布尔值为true的truthy值，因此只要localStorage里存在已存储的语言配置，不管值是什么，condition都是truthy，三元判断会固定返回"es"。这和你日志中「localStorage已存入cat，但targetLang计算结果为es」的现象完全吻合。

2. Hook依赖缺失+重复调用导致设置被覆盖 #

• 你封装的useLang中，useEffect依赖数组为空，仅会在组件首次挂载时执行一次，不会随传入的lang参数变化触发更新。
• 你在App根组件（所有路由的公共外层）直接调用了useLang(targetLang)，访问/cat//es路由时，SetLang组件的语言设置和App组件的逻辑会先后执行：
  1. 匹配/cat路由时，SetLang组件先执行，将localStorage设为cat、切换i18n语言为cat，随后触发重定向回根路径/
  2. 重定向触发App重渲染，因前面的优先级bug算出targetLang为es，App组件调用的useLang会再次执行，把语言和localStorage的值覆盖回es，就出现了你看到的异常日志顺序。

1. 修正targetLang的计算逻辑，给浏览器语言判断部分加括号明确运算优先级：

   const targetLang = localStorage.getItem('preferredLanguage') ?? (navigator.language.includes("es") ? "es" : "cat");
   

2. 补全useLang的useEffect依赖项，增加重复值判断避免无效执行：

   export const useLang = (lang: string) => {
     const { t, i18n } = useTranslation()
   
     useEffect(() => {
       if (!lang || i18n.language === lang) return;
       console.log(`Setting lang to ${lang}`);
       localStorage.setItem('preferredLanguage', lang);
       i18n.changeLanguage(lang);
       document.title = t('PageTitle');
     }, [lang, i18n, t])
   }
   

3. 移除App根组件中直接调用的useLang(targetLang)，避免和路由级的SetLang逻辑冲突。根路径的语言初始化逻辑可以放到根路由对应的HomePage组件中执行，仅在首次进入根路径、无主动语言切换操作时读取默认配置即可。

内容的提问来源于stack exchange，提问作者Vladimir