如何使用useState修复自动typeConversion

Question

我正在使用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

Answer 1

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

因此，它与传播运算符的使用无关，它从一开始就是一个字符串。

尽管它是用React渲染的，但数据源仍然是原始的DOM事件，因此React对此无能为力。

解决该问题的一种方法可能是执行以下操作：

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