如何使用 useState 修复自动 typeConversion答案

【问题标题】：How to fix automatic typeConversion with useState如何使用 useState 修复自动 typeConversion
【发布时间】：2019-07-25 13:24:55
【问题描述】：

我正在使用 react useState 挂钩来处理包含非字符串值的用户对象的简单表单提交。当我使用扩展运算符通过 setUser 设置新状态时，我的布尔值直接转换为字符串。

      name: '',
      isMinor: false
  })

这里是我的初始用户，当我使用 setUser 更新它时，isMinor 被转换为“false”或“true”。

const handleUser = ({target}) => {
    const name = target.name;
    setUser({
        ...user,
        [name]: target.value
    });
};

这是一个描述我的问题的简单示例： https://stackblitz.com/edit/react-nt9up5

【问题讨论】：

【解决方案1】：

问题在于target.value 来自 DOM，并且 DOM 不存储单选输入值的布尔值，仅存储字符串。

所以和展开运算符的使用没有关系，一开始就是一个字符串。

即使它是用 React 渲染的，数据的来源仍然是一个原始的 DOM 事件，所以 React 对此无能为力。

修复它的一种方法可能是执行以下操作：

setUser({
    ...user,
    [name]: target.value === "true"
});

【讨论】：

数字也一样吗？我还有一个带有选项的选择，我想将数组的键保存为值。您是否有针对带有布尔值、数字和字符串的大型表单的解决方法，或者我是否必须根据要修改的元素切换到 setUser。
与数字相同 - 所有输入值都是字符串。即使是 <input type="number"> 也会返回一个字符串。这里可能有我不知道的例外情况，但通常，DOM 会为您提供输入值的字符串。