当React-i18n语言在localStorage变更时触发useEffect Hook的问题

问题根源 #

你直接把window.localStorage.i18nextLng放进useEffect依赖数组没用——localStorage不是响应式数据，React不会监听它的变化；而i18next.language的更新时机可能滞后于localStorage的修改，导致打印的还是旧值。另外，storage事件默认只在同源的其他页面触发，当前页面修改localStorage不会触发这个事件，这也是你之前尝试无效的原因。

正确实现方式 #

直接监听i18next内置的languageChanged事件，同时兼容其他页面修改语言的场景（用storage事件同步）：

const getLanguage = () => i18next.language || window.localStorage.i18nextLng;

useEffect(() => {
  // 初始化时获取一次当前语言
  console.log({ storage: getLanguage() });

  // 监听i18next语言变化事件
  const handleLanguageChange = () => {
    console.log({ storage: getLanguage() });
  };
  i18next.on('languageChanged', handleLanguageChange);

  // 监听其他页面修改localStorage的情况
  const handleStorageChange = (e) => {
    if (e.key === 'i18nextLng') {
      // 手动触发i18next语言切换，保证同步
      i18next.changeLanguage(e.newValue);
    }
  };
  window.addEventListener('storage', handleStorageChange);

  // 清理监听，避免内存泄漏
  return () => {
    i18next.off('languageChanged', handleLanguageChange);
    window.removeEventListener('storage', handleStorageChange);
  };
}, []); // 无需额外依赖，事件监听会处理变化

补充说明 #

• languageChanged是i18n官方提供的事件，语言切换完成后触发，能确保拿到最新的语言值
• storage事件用来处理其他页面修改语言的场景，通过i18next.changeLanguage同步当前页面的语言状态，避免数据不一致

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