React useState对象状态更新字符串时出现拼接而非替换如何解决

这个问题和React的useState无关，根源是你使用的Material UI的ToggleButtonGroup组件默认是多选模式，没有开启单选配置：

• ToggleButtonGroup默认不携带exclusive属性时，属于多选交互，onChange回调的第二个参数selectedLanguage返回的是当前所有选中项的value组成的数组，而非单个字符串值
• 你给组件value属性传入的是字符串类型的formState.displayLanguage，组件内部在多选模式下处理字符串类型的value时，会发生隐式类型转换，把新选中的value和原有字符串拼接，导致你拿到的是拼接后的enjp这类错误值，最后你把这个错误值更新到了state里，和useState的更新逻辑无关。

要实现单选切换语言的需求，直接给ToggleButtonGroup添加exclusive属性即可，开启后组件会进入单选模式，onChange返回的selectedLanguage就是当前选中的单个字符串值，会直接覆盖原有值，不会出现拼接问题：

<ToggleButtonGroup
  value={formState.displayLanguage}
  exclusive // 新增这一行，开启单选模式
  onChange={(event, selectedLanguage) => {
    // 额外加个判空，避免点击已选中按钮时返回null清空值
    if (selectedLanguage) {
      setFormState({...formState, displayLanguage: selectedLanguage})
    }
  }}
  aria-label="select Display Language"
>
  {/* 原有ToggleButton代码不变 */}
</ToggleButtonGroup>

React useState本身没有任何字符串自动拼接的逻辑，你给setFormState传什么新值，它就会把state更新成什么值。本次问题完全是组件库默认交互模式和你预期不一致导致的传值错误。

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