React hook form is Valid返回时不在步进器中工作

Question

我在react hook表单问题上发布了这个问题，但也想过在这里发布，以防有人找到解决方案。

在步进器上使用react钩子形式时，我遇到了isValid状态的问题。当我们使用后退按钮时，isValid的状态似乎有点混乱。例如，如果第一步是有效的，并且您继续下一步，触发一个错误并返回，即使第一步仍然有效，isValid也将为false。

这是一个问题，因为我想使用isValid作为"下一个"按钮是否被禁用的状态。

有什么建议可以让它发挥作用吗？或者它是一个bug吗？

或者，对于使用什么变量禁用按钮，还有其他建议吗？

复制步骤

1. 转到这个CSBhttps://codesandbox.io/s/heuristic-lehmann-df6hmw
2. 输入名字
3. 输入姓氏
4. 单击"下一步">
5. 不填写地址，单击"下一步"将触发错误
6. 单击"上一步">
7. 请注意，即使步骤仍然有效，第一步的"下一步"按钮也会变灰

预期行为

isValid应与当前步骤的有效状态匹配

React挂钩形式版本：6.14.0，但也出现在7.33.0 上

Answer 1

编辑：对于任何有同样问题的人。。有人在reacthook-form的讨论页面上回答了我的问题。

• 在每个步骤中添加一个伪隐藏输入，该输入带有shouldUnregister:true和唯一名称

<input
type="hidden"
{...register("step1", {
shouldUnregister: true
})}
/>

这使得isValid状态在步进器中前后移动时以某种方式刷新。

CSB使用此解决方案，请参阅不同的步骤组件：https://codesandbox.io/s/jovial-swartz-t31nu3?file=/src/steps/Step1.js:299-419

Github讨论：https://github.com/react-hook-form/react-hook-form/discussions/8787