React 18.2语言切换时如何重新获取对应语言的数据？

我在React 18.2项目中使用i18next实现国际化，切换语言时仅能改变页面文字方向，但无法重新获取对应语言的数据。尝试了多种方案都无效，当前通过自定义hook useFetchWebsiteData 获取数据，相关代码如下：

说明： 使用I18nextLng进行翻译。

App.js #

import { RouterProvider } from "react-router-dom";

import Loading from './components/loading';
import routes from './routes/routes';
import { useEffect } from "react";
import i18n from "./utils/i18n";

function App() {
  useEffect(() => {
    let cleanup = true;
    if (cleanup) {
       i18n.on('languageChanged', (local) => {
        let direction = i18n.dir(local);
        document.body.dir = direction;
      })
    }
    return () => {
      cleanup = false;
    };
  }, []);

  return (
    <RouterProvider router={routes} fallbackElement={<Loading />} />
  )
}

export default App;

LanguageSwitcher.js #

import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();
    return (
      <select
        className="form-select-sm rounded-pill text-center"
        aria-label="Default select example"
        value={i18n.language}
        onChange={(e) =>
          i18n.changeLanguage( e.target.value)
        }
      >
        <option value="en">English</option>
        <option value="fa">دری</option>
      </select>
    );
}
 
export default LanguageSwitcher;

Internships.js #

import Image from "react-bootstrap/Image"
import { useFetchWebsiteData } from "../../hooks/website/useFetchWebsiteData";
import Loading from '../../components/loading'
import { useEffect, useState } from "react";
const Internships = () => {
  let lang = localStorage.getItem("i18nextLng")
  const { data, isLoading } = useFetchWebsiteData("getInternship", lang);

    // 注：此处`language`变量未定义，疑似笔误
    console.log("language changed", language);

    return !isLoading ? (
      <div className="container-fluid news-wrapper">
        <div className="container">
          <div className="row py-5">
            <div className="col-md-12">
              <div className="col-md-8">
                <h4 className="title mb-4">{data?.title}</h4>
                <p className="sub-title">{data?.content}</p>
              </div>
              <div className="col-md-2 text-center">
                <Image
                  src={require("../../images/internships.png")}
                  fluid={true}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    ) : (
      <Loading />
    );
}
 
export default Internships;

useFetchWebsiteData.js（自定义数据获取Hook） #

import { useState, useEffect } from "react";
import { axiosPublic } from "../../utils/axios";

export const useFetchWebsiteData = (url,lang) => {
  const [data, setData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
//   const lang = localStorage.getItem("i18nextLng");
console.log('lang inside hook', lang)
  useEffect(() => {
    // const controller = new AbortController()

    const fetchData = async () => {
      setIsLoading(true);
      await axiosPublic
        .get(url, {
          headers: { lang: lang === "fa" ? "dr" : "en" },
        //   signal: controller.signal,
        })
        .then((response) => {
          if (response.status === 200) {
            if (lang === "en") {
              setIsLoading(false);
              response.data.data.en.map((d) => {
                let title = d.title;
                let content = d.content;
                return setData({ title: title, content: content });
              });
            }
              if (lang === "fa") {
                  setIsLoading(false);
                console.log("fa intern", response.data.data.dr)
              response.data.data.dr.map((d) => {
                let title = d.title;
                let content = d.content;
                return setData({ title: title, content: content });
              });
              setIsLoading(false);
            }
          } else {
            setIsError(true);
          }
        })
        .catch((error) => {
          setIsLoading(false);
          setIsError(true);
          console.error(error.message);
        });
    };
    fetchData();
    // return () => {
    //   controller.abort()
    // };
  }, [url, lang]);

  return { data, isLoading, isError };
};

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