useEffect无法与componentDidUpdate一起使用

Question

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

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

在父级中，我有一个跟踪confirmEntry状态的状态。它跟踪单击 Submit 按钮的时间。父母也有一个ref（firstErrorField（自我解释））。

我想做的是以下事情：

1. 用户点击提交。
2. 这会将confirmEntry的状态设置为true。更改此状态应导致我的父母重新渲染。
3. confirmEntry的值现在为true，被传递到孩子的validateOnLoad道具中。这将触发对子组件的验证。
4. 验证完成后，我需要执行以下操作：
   1. 检查验证结果。
   2. 如果验证失败，请在验证后将firstErrorField标记为fieldID。
   3. 将confirmEntry设置为false，因为我不希望 Submit 继续。
   4. 将焦点移到该特定字段，以便用户知道他们需要处理的字段。
   5. 但是，如果验证成功，则继续提交。

我很难与useEffect一起使用。

这是一个codesandbox，具有两个实现。在类实现中，您将看到验证已选中，并且仅在两个表单字段均有效时才继续进行。但是，在挂钩实现中，即使尚未验证字段，表单提交仍会继续。

在此方面的任何帮助将不胜感激。

Answer 1

这是我对上述问题的解决方法。从本质上讲，它理解了useEffect的闭包。

https://codesandbox.io/s/zw1lp4985l