React应用中存入数组的本地化值切换语言后停止更新的问题

问题原因 #

核心问题是存入数组的是静态字符串值，而非动态关联本地化配置的引用：

• 点击「save to array」按钮时，this.locale.test会立即求值为当前语言对应的字符串（比如"English"），并把这个固定字符串存在数组里。
• 后续切换语言时，数组里的内容已经是独立的静态值，和locale对象没有关联，自然不会随语言变化更新。

你尝试的两种方法无效的原因：

• 存入对象：本质还是把当时的字符串存在str属性里，依然是静态值，和直接存字符串没有区别。
• 存入函数：函数里的caption是闭包捕获的当时的字符串值，调用函数时返回的还是那个固定值，不会重新去取最新的locale内容。

解决方案 #

最简洁高效的方式是存储本地化key而非具体文本，渲染时再根据当前语言从locale中动态获取对应文本。这样数组里只存标识，每次渲染都会匹配最新的语言配置。

修改后的代码示例 #

const locale = {
  eng: {
    test: "English"
  },
  esp: {
    test: "Spanish"
  },
  ger: {
    test: "German"
  }
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      array: [],
      lang: "eng"
    };
  }

  get locale() {
    return locale[this.state.lang];
  }

  setLocale = (lang) => {
    this.setState({ lang });
  };

  // 存储本地化key，而非具体文本
  saveToArray = (key) => {
    const newArray = [...this.state.array, { key }];
    this.setState({ array: newArray });
  };

  render() {
    return (
      <div>
        <div>From app: {this.locale.test}</div>
        <button onClick={() => this.setLocale("eng")}>English</button>
        <button onClick={() => this.setLocale("esp")}>Spanish</button>
        <button onClick={() => this.setLocale("ger")}>German</button>
        <div>
          {/* 传入本地化key，而非直接传文本 */}
          <button onClick={() => this.saveToArray("test")}>
            save to array
          </button>
        </div>
        {/* 渲染时根据当前语言和key动态获取文本 */}
        <div>Array: {this.state.array.map(el => this.locale[el.key])}</div>
      </div>
    );
  }
}

特殊场景处理（动态文本） #

如果你的场景需要存储非固定本地化key的动态内容（比如用户输入的文本），可以在切换语言时主动遍历数组更新内容：

setLocale = (lang) => {
  this.setState({ 
    lang,
    // 遍历数组，用新语言更新对应文本
    array: this.state.array.map(item => ({
      caption: locale[lang][item.key]
    }))
  });
};

这种方法适合特殊需求，但效率不如直接存储key，因为每次切换语言都要遍历数组更新。

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