Javascript 使用i18next在React中不重新加载翻译动态数据的问题

我正在做一个React项目，我已经使用i18next实现了语言切换.语言切换器工作正常，并更改语言，需要重新加载页面.然而，我希望它与我们的reload工作，并改变我的语言切换工作后，我面临一个问题，在我的组件中的动态翻译内容不更新时，语言改变.使用useTranslation翻译的静态内容会正确更新，但组件中动态生成的内容不会更新.

因此，我有一个reload Swtich是正确的工作与reload.

export default function LanguageSwitch() {
  const { i18n } = useTranslation();
  const [language, setLanguage] = useState(localStorage.getItem('lang') ?? 'en');

  function handleLangChange(lang: Key) {
    localStorage.setItem('lang', lang.toString())
    window.onload = function() {
      i18n.changeLanguage(lang.toString())
        .then(() => {
          setLanguage(lang.toString());
        })
        .catch((error) => {
          console.error('Error changing language:', error);
        });
    };
    window.location.reload();
  }

  return (
    <Dropdown aria-label='Language change switch'
              className={'language-switch'}
              onSelectionChange={handleLangChange}
              defaultSelectedKey={language}
              items={SUPPORTED_LANGUAGES}>
      {item =>
        <Item key={item.code}>{item.name}</Item>
      }
    </Dropdown>
  )
}

我改变了处理的方法，以不重新启动页面和我的动态数据现在不翻译

function handleLangChange(lang: Key) {
    localStorage.setItem('lang', lang.toString())
    i18n.changeLanguage(lang.toString())
      .then(() => {
        setLanguage(lang.toString());
      })
      .catch((error) => {
        console.error('Error changing language:', error);
      });
  }

下面是代码的例子

const Configurations = () => {
  const { t } = useTranslation();
  const [language, setLanguage] = useState(localStorage.getItem('lang') || 'en');
  const [configurations, setConfigurations] = useState([]);

  // Simulated API call to fetch configurations
  useEffect(() => {
    // Simulated configurations data
    const data = [
      { id: 1, type: 'foo' },
      { id: 2, type: 'bar' },
    ];
    setConfigurations(data);
  }, [language]); // Trigger fetch data when language changes

  return (
    <div>
      <h1>{t('Welcome')}</h1> - static data is translated correctly without reload
      <ul>
        {configurations.map((config) => (
          <li key={config.id}>
            {config.id}: {t(`TYPE_${config.type.toUpperCase()}.text`)} - dynamic data from the backend and using in the method are not translated without reload.
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Configurations;

NOTE: LanguageSwitch is a part of another Header component which is using in every component as a button in header

I am thinking of rendering app without reloading, but I am not sure how to achieve this