如何在状态中包含数据类型验证 - React 功能组件答案

【问题标题】：How to include data type validation on state - React Functional component如何在状态中包含数据类型验证 - React 功能组件
【发布时间】：2019-08-02 20:12:01
【问题描述】：

我已经开始使用 React 函数式组件了。我有疑问，如何验证和避免使用错误数据类型的特定状态更新...

我有以下 Hook：

const [apiData, setApiData] = useState({
    idProjectHeader: 0,
    projectName: "",
    isActive: false,
    idMethodology: 0,
    idUser: 0
});

当我尝试在渲染方法中使用时：

<input
        id='methodology'
        placeholder='Select a methodology'
        value={apiData.idMethodology}
        onChange={e => setApiData({ ...apiData, idMethodology: e.target.value })}
    />

但我有以下警告：

"message": "'{ idMethodology: string; idProjectHeader: number; >projectName: string; isActive: boolean; idUser: number; }' 类型的参数不可分配给 >'SetStateActionstring; isActive: boolean; idMethodology: number; idUser: number; }>'.

类型'{ idMethodology：字符串； idProjectHeader：编号；项目名称：字符串； >isActive：布尔值； idUser：号码； }' 不可分配给类型 '{ >idProjectHeader: number;项目名称：字符串； isActive：布尔值； idMethodology：>编号； idUser：号码； }'。

属性“idMethodology”的类型不兼容。

类型 'string' 不能分配给类型 'number'。"

是否存在一种以简单、标准的方式验证这一点的方法？

而且...很抱歉在这里包含这个问题...但是，以这种方式更新状态是否正确？是否存在其他方法？

【问题讨论】：

I am not able to reproduce this..你能提供一些显示这个错误的伪代码吗？
你使用打字稿？
@RichWarrior：是的

标签： reactjs typescript react-hooks

【解决方案1】：

您似乎只想允许idMethodology 的数字输入。如果是这种情况，您可以将type="number" 添加到输入中，并确保将idMethodology 设置为数字，而不是e.target.value 中包含的字符串：

    <input
        id='methodology'
        type="number"
        placeholder='Select a methodology'
        value={apiData.idMethodology}
        onChange={e => setApiData({ ...apiData, idMethodology: parseInt(e.target.value) })}
    />

【讨论】：

看起来很有希望，但不会帮助我验证日期或浮点数...在这种情况下，PropTypes 有很大帮助...有机会验证这些情况吗？

【解决方案2】：

1 你在使用打字稿吗？

2 因为类型是 e.target.value 字符串，您会收到一条错误消息。

3 为使一切正常工作，您必须将字符串转换为数字。

  <input
    id="methodology"
    placeholder="Select a methodology"
    value={apiData.idMethodology}
    onChange={e =>
      setApiData({ ...apiData, idMethodology: +e.target.value })
    }

但要小心！如果您输入的输入与数字不同，则获取 NaN。

【讨论】：