自定义React Hook状态更新后未同步触发所有使用组件刷新问题

你当前实现的useTranslation是普通自定义Hook，每一个组件调用该Hook时都会创建独立的状态副本，各组件的language状态完全隔离，因此单个组件内调用setLanguage只会修改自身的状态，不会影响其他组件的实例。

用React Context把多语言状态提升到全局，让所有组件调用useTranslation时都共享同一份全局状态即可实现同步更新。

1. 修改自定义Hook代码，新增Context和Provider #

// customHook.js
import { createContext, useContext, useCallback, useState } from "react";

// 创建多语言Context
const TranslationContext = createContext();

// 全局Provider组件，需要包裹所有用到多语言的业务组件
export function TranslationProvider({ children }) {
  const [language, setLanguage] = useState("ar");
  const [fallbackLanguage, setFallbackLanguage] = useState("en");

  const translate = useCallback(() => {
    return language;
  }, [language]);

  const contextValue = {
    language,
    setLanguage,
    fallbackLanguage,
    setFallbackLanguage,
    t: translate
  };

  return (
    <TranslationContext.Provider value={contextValue}>
      {children}
    </TranslationContext.Provider>
  );
}

// 修改自定义Hook，改为从Context取全局状态
export default function useTranslation() {
  const context = useContext(TranslationContext);
  if (!context) {
    throw new Error("useTranslation must be used within a TranslationProvider");
  }
  return context;
}

2. 在项目根组件外层包裹Provider #

比如在入口文件index.js里修改：

import { TranslationProvider } from "./customHook";
import Component1 from "./Component1";
import Component2 from "./Component2";

export default function App() {
  return (
    <TranslationProvider>
      <Component1 />
      <Component2 />
    </TranslationProvider>
  );
}

3. 业务组件无需修改 #

原来的Component1、Component2代码可以完全保持不变，修改后调用setLanguage即可触发所有使用useTranslation的组件同步更新。

如果你不想自己维护Context逻辑，也可以用Zustand等轻量状态管理库实现全局共享，代码会更简洁：

// 基于Zustand实现的useTranslation
import { create } from "zustand";

const useTranslationStore = create((set) => ({
  language: "ar",
  fallbackLanguage: "en",
  setLanguage: (lang) => set({ language: lang }),
  setFallbackLanguage: (lang) => set({ fallbackLanguage: lang }),
}));

export default function useTranslation() {
  const { language, setLanguage, fallbackLanguage, setFallbackLanguage } = useTranslationStore();
  const t = useCallback(() => language, [language]);
  return { t, language, setLanguage, fallbackLanguage, setFallbackLanguage };
}

这种方案不需要额外加Provider包裹，直接调用Hook即可实现状态全局共享。

内容的提问来源于stack exchange，提问作者Marwan-Ezzat