bootstrap-switch-button-react切换i18n语言时onLabel/offLabel不更新如何解决

问题原因 #

• 变量名拼写错误：定义状态时使用的变量名是offlabel，组件传参时写的是offLabel，大小写不匹配导致实际传入组件的是undefined，状态更新自然无法生效。
• 第三方组件更新机制缺陷：bootstrap-switch-button-react组件仅在首次挂载时读取标签属性，后续props发生变化时不会主动触发重渲染更新标签内容。
• 事件监听存在闭包陷阱且无清理逻辑：直接在组件顶层注册languageChanged监听，没有在组件卸载时移除，会导致重复注册监听；同时监听函数里的t方法属于首次渲染的闭包，拿到的永远是首次渲染的翻译值，无法获取最新语言的翻译结果。

解决方案 #

步骤1：修正变量名拼写，统一使用驼峰命名 #

步骤2：用useEffect包裹事件监听，添加清理逻辑避免内存泄漏和闭包问题 #

步骤3：给开关组件绑定key属性为当前语言标识，语言切换时触发组件销毁重建，强制读取最新标签属性 #

修复后完整代码 #

import React, { useState, useEffect } from 'react';
import BootstrapSwitchButton from "bootstrap-switch-button-react";
import { useTranslation } from 'react-i18next';

export default function SwitchIO() {
  const { t, i18n } = useTranslation();
  // 统一变量命名为驼峰
  const [offLabel, setOffLabel] = useState(t("off"));

  useEffect(() => {
    // 定义监听函数
    const handleLangChange = (lng) => {
      setOffLabel(t("off"));
      console.log("language changed to : ", lng);
    };
    // 注册监听
    i18n.on('languageChanged', handleLangChange);
    // 返回清理函数，组件卸载时移除监听
    return () => {
      i18n.off('languageChanged', handleLangChange);
    };
  // 把t和i18n加入依赖项，避免闭包问题
  }, [t, i18n]);

  return (
    <BootstrapSwitchButton 
      // key绑定当前语言，语言变化时强制重建组件
      key={i18n.language}
      onlabel="Test"
      offlabel={offLabel}
      checked={...}
      .....
    />
  )
}

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