React集成i18next调用changeLanguage后语言无变化求助

针对你遇到的问题，核心原因是类组件重渲染逻辑错误，加上部分API使用不当，以下是具体修复步骤：

1. 替换手动调用this.Render()为状态更新 #

React类组件的重渲染由state/props变化触发，手动调用this.Render()不会触发DOM更新，必须通过setState触发：

// App组件中修改订阅逻辑
LanguageService.languageChanged$
  .pipe(takeUntil(this.unmount.unmount$))
  .subscribe(() => {
    // 空对象更新状态，触发组件重渲染
    this.setState({});
  });

2. 为类组件添加withTranslation高阶组件 #

react-i18next提供的withTranslationHOC会自动让组件订阅i18next的语言变更事件，无需手动监听Subject，同时注入t翻译函数：

import { withTranslation } from 'react-i18next';

class App extends React.Component {
  render() {
    const { t } = this.props;
    return (
      <div>{t('welcome.message')}</div>
    );
  }
}

// 包裹组件，自动注入翻译能力
export default withTranslation()(App);

3. 修正LanguageService中的API错误 #

• i18next.changeLanguage的回调是错误优先的，需先处理错误
• moment的语言设置方法是小写的locale，不是大写Locale

class LanguageServiceImpl {
  private languageChangedSub = new ReplaySubject<string>();
  public languageChanged$ = this.languageChangedSub.asObservable();

  public setLanguage(lang: string): void {
    i18next.changeLanguage(lang, (err) => {
      if (err) {
        console.error('语言切换失败:', err);
        return;
      }
      // 修正moment方法名
      moment.locale(lang);
      this.languageChangedSub.next(lang);
    });
  }
}

4. 验证翻译资源导入正确性 #

确保sv和en的翻译对象已正确导入，比如：

import sv from './translations/sv.json';
import en from './translations/en.json';

const resources = {
    sv: { translation: sv },
    en: { translation: en }
};

可选优化：移除自定义Subject监听 #

如果使用withTranslationHOC，组件会自动响应语言变化，此时可以移除LanguageService中的Subject和App组件的订阅逻辑，简化代码：

// 修改LanguageService，无需Subject通知
class LanguageServiceImpl {
  public setLanguage(lang: string): void {
    i18next.changeLanguage(lang, (err) => {
      if (err) {
        console.error('语言切换失败:', err);
        return;
      }
      moment.locale(lang);
    });
  }
}

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