React中使用useState时i18n翻译为何无法更新？

嘿，这个问题我碰到过好多次啦！核心原因其实很简单：useState的初始值只会在组件第一次渲染的时候被设置一次。当你切换语言时，t()函数确实能返回新的翻译文本，但你存在useState里的旧值不会自动更新——因为没有任何代码触发它去重新调用t()并更新状态。

举个例子，假设你原来的代码是这样的：

const [labelText, setLabelText] = useState(t('filter.number'));

第一次渲染时，t('filter.number')会拿到当前语言的翻译并存在state里。但切换语言后，组件虽然会重渲染，但useState不会再重新执行初始赋值逻辑，所以labelText还是旧语言的翻译。

那怎么解决呢？分两种情况来处理：

情况1：不需要用useState存翻译文本 #

如果你的标签文本只是用来显示，没有动态修改的需求，那完全没必要把翻译结果存在state里！直接在渲染的时候调用t()函数就行：

// 删掉这行：const [labelText, setLabelText] = useState(t('filter.number'));

// 渲染TextField的时候直接用
<TextField label={t(isInvoices ? 'filter.invoiceNumber' : 'filter.number')} />

这样每次组件重渲染（切换语言、或者isInvoices变化时），都会重新调用t()拿到最新的翻译文本，完美解决更新问题。

情况2：必须用useState存（比如需要动态修改文本） #

如果你确实需要把翻译文本存在state里（比如有按钮可以手动修改标签之类的场景），那就要用useEffect来监听语言变化，手动更新状态：

const { t, i18n } = useTranslation();
// 初始值还是用t()设置
const [labelText, setLabelText] = useState(t('filter.number'));

useEffect(() => {
  // 先确定当前要用的翻译键（根据你的业务逻辑，比如isInvoices）
  const currentTranslationKey = isInvoices ? 'filter.invoiceNumber' : 'filter.number';
  // 当语言变化或者翻译键依赖的变量变化时，更新state
  setLabelText(t(currentTranslationKey));
}, [i18n.language, t, isInvoices]); // 把所有影响翻译键的变量都放进依赖数组

这里i18n.language是语言变化的标记，当它改变时，useEffect会触发，重新调用t()获取最新翻译并更新state。如果你的翻译键还依赖其他变量（比如isInvoices），也要把这些变量加到依赖数组里，确保它们变化时翻译也能更新。

总结一下：useState是“惰性”的，初始值不会自动更新。要么直接在渲染时用t()，要么用useEffect监听变化来手动更新状态～

备注：内容来源于stack exchange，提问作者magrega