自定义useTranslation Hook调用setLanguage后总是恢复初始状态怎么办

核心问题排查&解决方法 #

1. 页面默认刷新导致状态重置（匹配你描述的状态短暂变化后回退的现象）

如果你的切换按钮放在<form>标签内，且未指定type="button"，点击按钮会触发浏览器默认的表单提交行为，页面刷新后所有React状态都会重置为初始值。
解决方法：

• 给切换按钮添加type="button"属性
• 或者在点击事件回调中调用e.preventDefault()阻止默认提交行为

2. 自定义方法逻辑错误（会导致翻译功能失效）

你定义的getNestedTranslation方法没有返回reduce的执行结果，所以该方法永远返回undefined，最终翻译函数只会返回传入的key本身，拿不到对应翻译内容。修正后代码如下：

const getNestedTranslation = (language, keys) => {
  // 新增return返回reduce处理结果
  return keys.reduce((obj, key) => {
    return obj?.[key];
  }, translations[language]);
};

其他排查点

• 确认useTranslation是顶层导出的自定义Hook，不要在组件内部嵌套声明
• 确认调用useTranslation的组件没有被设置动态/不稳定的key属性，否则组件会被频繁卸载重建，状态也会被重置

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