Question

我正在创建带有一些复杂验证的表单。我不想在两个错误之一之前不显示任何错误：

用户写错了内容
用户单击表单中的“下一步”按钮，并且值无效

所以我想保留错误的状态，但是我看不到为什么我的错误没有按预期出现。因此，我想知道为什么第一个输入的错误会被文件中最后一个字段覆盖？它只显示最后一个错误。

我可以在顶层进行所有验证，但是我宁愿在输入层进行特定于输入的验证。这样，如果其他人想要使用该组件，则验证已经在输入组件中。

下面的代码示例：

// Main file
const [errors, setErrors] = useState({});
const [values, setValues] = useState({
  myFieldNameNo1: null,
  myFieldNameNo2: null,
});

<div>
  <FormContainer errors={errors} setErrors={setErrors} />
  ...
</div>


// FormContainer.jsx

<div>
    <CustomInputNo1 value={values.myFieldNameNo1} setError={error => props.setErrors({ ...props.errors, fieldNameNo1: error }) />
    <CustomInputNo2 value={values.myFieldNameNo2} setError={error => props.setErrors({ ...props.errors, fieldNameNo2: error }) />
</div>

// Inside each of the CustomInputs

useEffect(() => {
  if (someErrorValidationReturnsTrue) {
    props.setError("My error message");
  }
}, [props.value]);

为什么我的useState状态被覆盖？

0 个答案: