React+next-translate环境下，无法检测语言切换的问题求助

针对你使用next-translate时，需要检测语言切换以更新API获取资源的需求，以下是可行解决方案，同时先说明你之前尝试失败的原因：

你之前的问题分析 #

1. 类组件生命周期不适用：你用了componentDidUpdate但当前是函数组件（JSX页面），函数组件没有this，所以会报Cannot read property 'props' of undefined，函数组件需用useEffect替代类组件的生命周期逻辑。
2. next-translate的I18n不是原生i18next实例：你尝试调用i18next.on，但next-translate导出的I18n对象并没有这个方法，因此会报错on is not a function，不能直接用原生i18next的事件监听方式。

可行方案 #

方案1：通过Next.js的useRouter监听locale变化 #

因为你切换语言是通过router.replace修改locale，所以可以直接监听router.locale的变化，触发API重新请求：

import { useRouter } from 'next/router';
import { useTranslation } from 'next-translate';
import { useEffect, useState } from 'react';

export default function MemberPage() {
  const { t } = useTranslation("member");
  const router = useRouter();
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // 语言切换时重新获取API资源
    const fetchLocalizedData = async () => {
      const res = await fetch(`/api/your-resource?locale=${router.locale}`);
      const data = await res.json();
      setApiData(data);
    };

    fetchLocalizedData();
  }, [router.locale]); // 依赖设为router.locale，变化时执行回调

  return (
    <div>
      {/* 渲染页面内容和apiData */}
    </div>
  );
}

方案2：监听useTranslation返回的i18n语言属性 #

部分版本的next-translate中，useTranslation会返回包含当前语言的i18n对象，你可以监听其language属性的变化：

import { useTranslation } from 'next-translate';
import { useEffect, useState } from 'react';

export default function MemberPage() {
  const { t, i18n } = useTranslation("member");
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const fetchLocalizedData = async () => {
      const res = await fetch(`/api/your-resource?locale=${i18n.language}`);
      const data = await res.json();
      setApiData(data);
    };

    fetchLocalizedData();
  }, [i18n.language]); // 监听语言属性变化

  return (
    <div>
      {/* 渲染页面内容 */}
    </div>
  );
}

方案3：封装自定义钩子复用检测逻辑 #

如果多个页面需要检测语言切换，可以封装一个自定义钩子：

// hooks/useLanguageChange.js
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export function useLanguageChange(onLanguageChange) {
  const router = useRouter();

  useEffect(() => {
    onLanguageChange(router.locale);
  }, [router.locale, onLanguageChange]);
}

使用时：

import { useTranslation } from 'next-translate';
import { useState } from 'react';
import { useLanguageChange } from '../hooks/useLanguageChange';

export default function MemberPage() {
  const { t } = useTranslation("member");
  const [apiData, setApiData] = useState(null);

  useLanguageChange(async (locale) => {
    const res = await fetch(`/api/your-resource?locale=${locale}`);
    const data = await res.json();
    setApiData(data);
  });

  return <div>{/* 页面内容 */}</div>;
}

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