如何在不同React组件间共享useState状态实现全局多语言切换

问题根源 #

• 你在LanguagePicker组件内部额外嵌套了一层I18Provider，和App根组件的Provider完全隔离，导致状态只能在当前组件生效
• 你没有将LanguagePicker组件放到App组件的I18Provider包裹范围内，且useBetween的使用方式不符合要求

解决方案 #

方案1：Props透传（适合层级不深的场景，无需额外调整依赖） #

1. 修改App.js，引入LanguagePicker组件并将setLocale方法作为参数传递：

import { useState } from "react";
import { I18Provider, LOCALES } from "./i18n";
import Header from "./Header";
import Footer from "./Footer";
// 调整为你实际的LanguagePicker组件路径
import LanguagePicker from './components/LanguagePicker';

const App = (props) => {
  const [locale, setLocale] = useState(LOCALES.ENGLISH);

  return (
    <I18Provider locale={locale}>
        <div>
          <LanguagePicker setLocale={setLocale} />
          <Header />
          <Footer />
        </div>
    </I18Provider>
  );
};

export default App;

2. 修改languagePicker.js，删除多余的Provider、App导入和useBetween逻辑：

import translate from "./i18n/translate";
import { LOCALES } from "./i18n";

const LanguagePicker = ({setLocale}) => {
  return (
     <div>
          <button onClick={() => setLocale(LOCALES.ITALIAN)}>italian</button>
          <button onClick={() => setLocale(LOCALES.ENGLISH)}>english</button>
          <button onClick={() => setLocale(LOCALES.GERMAN)}>german</button>
          <p>{translate("hello")} </p>
        </div>
  );
};
export default LanguagePicker;

方案2：useBetween共享状态（适合跨多层级组件共享的场景） #

1. 新增状态共享文件useLocaleState.js：

import { useState } from "react";
import { LOCALES } from "./i18n";

const useLocaleState = () => {
  const [locale, setLocale] = useState(LOCALES.ENGLISH);
  return { locale, setLocale };
};

export default useLocaleState;

2. 修改App.js：

import { useBetween } from "use-between";
import { I18Provider } from "./i18n";
import Header from "./Header";
import Footer from "./Footer";
import LanguagePicker from './components/LanguagePicker';
import useLocaleState from './useLocaleState';

const App = (props) => {
  const { locale } = useBetween(useLocaleState);

  return (
    <I18Provider locale={locale}>
        <div>
          <LanguagePicker />
          <Header />
          <Footer />
        </div>
    </I18Provider>
  );
};

export default App;

3. 修改languagePicker.js：

import { useBetween } from "use-between";
import translate from "./i18n/translate";
import { LOCALES } from "./i18n";
import useLocaleState from './useLocaleState';

const LanguagePicker = () => {
  const { setLocale } = useBetween(useLocaleState);
  return (
     <div>
          <button onClick={() => setLocale(LOCALES.ITALIAN)}>italian</button>
          <button onClick={() => setLocale(LOCALES.ENGLISH)}>english</button>
          <button onClick={() => setLocale(LOCALES.GERMAN)}>german</button>
          <p>{translate("hello")} </p>
        </div>
  );
};
export default LanguagePicker;

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