React 钩子表单 - 使用复选框

问：

在我们的支持页面上，我们必须显示产品的复选框，以便用户选择他们有问题的产品。

我映射了一个名为 CheckboxListItem 的组件中的复选框：

映射在对象数组中

我们必须发送到服务器的数据（选中的复选框）必须具有下图中的确切形状，并且项目几乎总是以这种结构发送。

数据结构

一切似乎都很好，直到我们的后端团队报告了一些奇怪的事情：有时他们以一种非常奇怪和模棱两可的方式接收数据：

具有奇数结构的发布数据

我检查了我编写的代码，并注意到当我在复选框内单击以选中或取消选中它时，一切正常，但是当我不小心在它们之间单击时，所有选中的复选框都未选中。当我记录checkboxItems时，我看到了那个奇怪的结构。我尝试再次选中一两个复选框，它们按我的预期工作。但是当我查看日志（我要发送到服务器的数据）时，我再次看到了确切的奇怪结构：

带有 ID 的对象是选中的项目

那么，问题出在哪里呢？

当我在 ref prop 中使用寄存器函数时，我只是忘记将寄存器函数的特定名称作为第一个参数:)

当寄存器函数中未提及该名称时，该复选框将失去其值。

这可能会导致另一个奇怪的问题：当你映射了一个对象数组，但只有一个对象属性，并且你只有一个复选框要显示。

在这种情况下，React Hook Form 无法将数组项识别为对象，因此它会将其转换为布尔类型化值：

(https://i.stack.imgur.com/Nku1m.jpg)

因此，当我们不提及寄存器中的输入名称时，我们可能会在不同情况下得到不同的行为，这与我们想要的相反:)

我们可以通过在寄存器中添加名称输入来解决这个问题：

将名称值添加到 reg func 中

我还找到了解决此问题的另一种方法： 我们还可以考虑为每个呈现的复选框使用单独的名称。在这种情况下，使用名称 + 索引模式可能是一个合适的解决方案： （https://i.stack.imgur.com/6xnEo.jpg)

因此，当您使用 react-hook-form 时，请注意 register 函数以及作为名称或 registerOptions 传递给它的值。