useEffect与componentDidUpdate的工作方式不同

Question

我有一个父表单组件，它呈现2个子字段组件。

子组件有2个用于验证的道具。 首先，我可以用来触发对该组件的验证检查的validateOnLoad 。 第二个支柱是onValidation prop，我在验证完成后用它来执行回调。 回调将传回validationResults的fieldID和validationResults。

在父级中，我有一个跟踪confirmEntry状态的状态。 这会跟踪单击“ 提交”按钮的时间。 父级也有一个名为firstErrorField的ref （自解释）。

我想要做的是以下内容：

1. 用户点击提交 。
2. 这confirmEntry状态设置为true 。 更改此状态应该导致我的父级重新呈现。
3. 现在为true的confirmEntry值将传递给子confirmEntry的validateOnLoad prop。 这会触发子组件的验证。
4. 验证完成后，我需要执行以下操作：
   1. 检查验证结果。
   2. 如果验证失败， firstErrorField使用我从验证中返回的fieldID标记firstErrorField 。
   3. 将confirmEntry设置为false因为我不希望继续提交 。
   4. 将焦点移至此特定字段，以便用户知道他们需要解决哪个字段。
   5. 但是，如果验证成功，则继续提交。

我正在努力使用useEffect来解决这个useEffect 。

这是一个包含两种实现的代码框 。 在类实现中，您将看到验证已被检查，并且只有在两个表单字段都有效时才会进行验证。 但是，在钩子实现中，即使尚未验证字段，表单也会继续。

任何帮助将不胜感激。

Answer 1

这是我对上述问题的解决方法。 它主要归结为理解useEffect上的闭包。

https://codesandbox.io/s/zw1lp4985l