如何修复自动类型转换与使用状态

Question

我正在使用 react useState 钩子来处理一个简单的表单提交，其中包含包含非字符串值的用户对象。当我使用 spread 运算符与 setUser 设置新状态时，我的布尔值直接转换为字符串。

      name: '',
      isMinor: false
  })

在这里，我的初始用户，当我使用 setUser 更新它时，isMinor被转换为"假"或"真"。

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

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

Answer 1

问题是target.value来自 DOM，DOM 不存储无线电输入值的布尔值，只存储字符串。

所以它与 spread 运算符的使用无关，它从一开始就是一个字符串。

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

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

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