React 组件输入验证（useState()）落后一步

【问题标题】：React component Input validation (useState()) one step behindReact 组件输入验证（useState()）落后一步
【发布时间】：2021-08-05 20:50:15
【问题描述】：

我对输入（React 组件）进行了验证（整数 > 0）。它有一个onChange={onChangeHandle} 并使用useState()。目标是在验证失败时显示错误并禁用提交按钮。问题是验证落后了一步：

例子：

初始值 0 - 无验证
类型“1” - false => 显示错误，按钮已禁用（此处应为 true）
添加另一个“1”，所以“11” - true => 错误隐藏，按钮启用

代码如下：

const onChangeHandle = e => {
const isMileageValid = Number.isInteger(Number(mileage)) && Number(mileage) > 0;
if (!isMileageValid){
    setErrorMessage(gettext('You must enter a valid mileage'));
}
else {
    setErrorMessage(null);
}
setMileage(e.target.value);
setDisableConfirmButton(!isMileageValid);
}

我在这里错过了什么？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

问题在于您的操作顺序。在您的示例中，您创建了一个名为 isMileageValid 的变量（第 2 行），它依赖于 mileage。但是，您还没有使用setMileage() 设置mileage 的内容，因为您随后会调用它（第6 行）

相反，您可以从函数 (e.target.value) 中获取值并将该值用于您的 isMileageValid 变量。

另外，在您的示例中，您实际上不需要 mileage 或 setMileage()，除非您在应用程序的其他地方使用它。

const onChangeHandle = e => {
  const val = e.target.value;
  const isMileageValid = Number.isInteger(Number(val)) && Number(val) > 0;
  if (!isMileageValid){
    setErrorMessage(gettext('You must enter a valid mileage'));
  }
  else {
    setErrorMessage(null);
  }
  setMileage(val); // no longer needed because mileage isnt used
  setDisableConfirmButton(!isMileageValid);
}

【讨论】：