如何使用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"
});