如何基于Zustand Store实现React中两个语言选择框同步？

问题描述 #

Web应用基于i18n + Zustand实现多语言功能，导航栏和页脚各有一个语言选择框。切换其中一个选择框的语言后，页面翻译正常，但另一个选择框仍显示旧语言值，无法同步Zustand Store中的新语言状态。

问题根源 #

1. Zustand状态更新方式错误：直接修改this.currentlySelectedLanguage不会触发组件重渲染，必须使用Zustand提供的set方法更新状态。
2. 选择框绑定方式错误：使用defaultValue仅在组件初始化时生效，状态变化后不会自动更新，需改为value实现受控绑定。

解决方案 #

步骤1：修复Zustand Store的状态更新逻辑 #

修改changeCurrentlySelectedLanguage方法，通过Zustand的set函数更新状态，触发组件重渲染：

import { create } from "zustand";
import i18n from "../i18n";

type WebSiteLanguageSettings = {
  currentlySelectedLanguage: string
  changeCurrentlySelectedLanguage: (language: string) => void
}

export const useWebSiteLanguageStore = create<WebSiteLanguageSettings>(
  (set) => {
    return {
      currentlySelectedLanguage: i18n.language,
      changeCurrentlySelectedLanguage(language) {
        i18n.changeLanguage(language);
        // 使用set方法更新状态，触发订阅组件重渲染
        set({ currentlySelectedLanguage: language });
      },
    };
  }
);

步骤2：将选择框改为受控组件 #

把两个组件中的defaultValue替换为value，绑定到Zustand的状态值：

Navbar组件修改：

<LanguageSelector
  value={websiteLanguageStore.currentlySelectedLanguage}
  onChange={(e) =>
    websiteLanguageStore.changeCurrentlySelectedLanguage(
      e.target.value
    )
  }
>
  <option value="pt">{t("navbarLanguageSelectorOption1")}</option>
  <option value="fr">{t("navbarLanguageSelectorOption2")}</option>
  <option value="en">{t("navbarLanguageSelectorOption3")}</option>
  <option value="de">{t("navbarLanguageSelectorOption4")}</option>
  <option value="tt">{t("navbarLanguageSelectorOption5")}</option>
  <option value="es">{t("navbarLanguageSelectorOption6")}</option>
</LanguageSelector>

Footer组件修改：

<LanguageSelector
  value={websiteLanguageStore.currentlySelectedLanguage}
  onChange={(e) => {
    websiteLanguageStore.changeCurrentlySelectedLanguage(
      e.target.value
    );
  }}
>
  <option value="pt">{t("footerLanguageSelectorOption1")}</option>
  <option value="fr">{t("footerLanguageSelectorOption2")}</option>
  <option value="en">{t("footerLanguageSelectorOption3")}</option>
  <option value="de">{t("footerLanguageSelectorOption4")}</option>
  <option value="tt">{t("footerLanguageSelectorOption5")}</option>
  <option value="es">{t("footerLanguageSelectorOption6")}</option>
</LanguageSelector>

可选优化：同步localStorage（持久化语言设置） #

如果需要持久化用户的语言选择，可在Store中同步到localStorage：

export const useWebSiteLanguageStore = create<WebSiteLanguageSettings>(
  (set) => {
    // 从localStorage读取初始语言，优先于i18n默认值
    const initialLang = localStorage.getItem('i18nextLng') || i18n.language;
    return {
      currentlySelectedLanguage: initialLang,
      changeCurrentlySelectedLanguage(language) {
        i18n.changeLanguage(language);
        set({ currentlySelectedLanguage: language });
        localStorage.setItem('i18nextLng', language);
      },
    };
  }
);

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