自定义useTranslation Hook下部分变量不随语言切换更新问题排查

我开发的React Native应用里，自定义了useTranslation Hook，能根据Redux Store的语言设置返回对应翻译文本，大部分场景正常，但SettingsScreen里有两个变量切换语言后不更新：

1. initialInactivityOption
2. 第一个MultiSelectSetting的initialValue

相关代码片段：

// initialInactivityOption相关
const inactiveOptions = [
    { text: `0 ${t("minutes")}`, value: 0 },
    { text: `5 ${t("minutes")}`, value: 5 },
    { text: `10 ${t("minutes")}`, value: 10 },
    { text: `15 ${t("minutes")}`, value: 15 },
];
const initialInactivityOption = inactiveOptions.find(
    (option) => option.value === inactivityTimer
).text;

// 第一个MultiSelectSetting的initialValue
initialValue={
    authMode === "credentials" ? t("noAuth") : t("biometrics")
}

原因分析 #

1. 组件受控逻辑缺失：MultiSelectSetting如果是非受控组件，只会在挂载时读取一次initialValue，后续props变化不会触发显示更新，即便父组件因语言变化重渲染，子组件也不会同步更新。
2. 依赖项不完整：尝试useMemo或useState+useEffect时，可能只添加了language作为依赖，遗漏了inactivityTimer、authMode、credentialsSaved等影响变量计算的关键值，导致变量未随依赖变化重新计算。

解决方案 #

1. 用useMemo包裹动态变量，补全依赖项 #

将所有需要随语言/状态变化的计算变量用useMemo包裹，确保所有影响结果的变量都加入依赖数组：

import { useMemo } from "react";

// 重写authOptions
const authOptions = useMemo(() => [
  {
    text: t("noAuth"),
    value: "credentials",
    icon: "lock-open",
    disabled: !credentialsSaved,
  },
  {
    text: t("biometrics"),
    value: "biometrics",
    icon: "fingerprint",
    disabled: !hasBiometricAuth && !credentialsSaved,
  },
], [t, credentialsSaved, hasBiometricAuth]);

// 重写inactiveOptions
const inactiveOptions = useMemo(() => [
  { text: `0 ${t("minutes")}`, value: 0 },
  { text: `5 ${t("minutes")}`, value: 5 },
  { text: `10 ${t("minutes")}`, value: 10 },
  { text: `15 ${t("minutes")}`, value: 15 },
], [t]);

// 重写initialInactivityOption
const initialInactivityOption = useMemo(() => {
  const matchedOption = inactiveOptions.find(opt => opt.value === inactivityTimer);
  return matchedOption ? matchedOption.text : "";
}, [inactiveOptions, inactivityTimer]);

2. 修复MultiSelectSetting的更新逻辑 #

方案A：改为受控组件（推荐）

修改MultiSelectSetting组件，让它接收value属性代替initialValue，用父状态控制选中值，确保props变化时同步更新：

// 第一个MultiSelectSetting
<MultiSelectSetting
  title={t("authMode")}
  description={t("authModeDescription")}
  value={authMode === "credentials" ? t("noAuth") : t("biometrics")}
  options={authOptions}
  onChange={(value) => dispatch(selectAuth(value))}
/>

// 第二个MultiSelectSetting
<MultiSelectSetting
  title={t("inactivityTimer")}
  description={t("inactivityTimerDescription")}
  value={initialInactivityOption}
  height={280}
  options={inactiveOptions}
  onChange={(value) => dispatch(updateInactivityTimer(value))}
/>

同时在MultiSelectSetting内部，使用props.value控制显示的选中内容，而非仅初始化时读取。

方案B：强制组件重渲染（无法修改子组件时用）

给MultiSelectSetting添加key属性，语言变化时更新key，触发组件重新挂载以读取新的initialValue：

// 第一个MultiSelectSetting
<MultiSelectSetting
  key={`auth-mode-${language}`}
  title={t("authMode")}
  description={t("authModeDescription")}
  initialValue={authMode === "credentials" ? t("noAuth") : t("biometrics")}
  options={authOptions}
  onChange={(value) => dispatch(selectAuth(value))}
/>

// 第二个MultiSelectSetting
<MultiSelectSetting
  key={`inactivity-timer-${language}`}
  title={t("inactivityTimer")}
  description={t("inactivityTimerDescription")}
  initialValue={initialInactivityOption}
  height={280}
  options={inactiveOptions}
  onChange={(value) => dispatch(updateInactivityTimer(value))}
/>

内容的提问来源于stack exchange，提问作者GeoTracer - Jarne