使用React Hook Form在Checkbox上勾选持久性

Question

我有一个Checkbox组件，看起来像这样:

...
{values.map((value) => (
<div key={value}>
<div
className={`checkbox ${
checked && checked.includes(value) && "checked"
}`}
>
<div className="checkbox__box">
<input
{...register(name, {
required: required,
validate: CustomValidation,
})}
id={name + value}
type="checkbox"
name={name}
value={value}
defaultChecked={defaultData === value}
/>
</div>
</div>
<label htmlFor={name + value}>
<FormattedMessage id={value} />
</label>
</div>
))}

如您所见，组件通过checkedprop数组继电器将checked类添加到单个复选框元素。

组件被这样调用:

<Checkbox
values={SourceOfFundsList}
name="source_of_funds__list"
md={12}
register={register}
errors={errors}
defaultData={
props.data.dataTree.customer.source_of_funds.source_of_funds__list
}
checked={source_of_funds__list__checked}
/>

checked道具是通过观察表单状态来填充的，如下所示:

const source_of_funds__list__checked = watch("source_of_funds__list");

按预期工作，在单击Checkbox后将类添加到该Checkbox的每个项。它还可以通过使用useEffect正确地登录控制台，如下所示:

useEffect(() => {
console.log(source_of_funds__list__checked);
}, [source_of_funds__list__checked]);

当我移动到另一条路线时，问题出现了，然后我返回。

当我回到页面时，发生了两件事:

• 状态是持久的，当检查组件时，defaultData包含正确的数组与检查项
• checked数组未定义，因此UI不显示正确的状态(所有复选框看起来未选中，因为类未应用)

我已经尝试添加第二个useEffect来填充checked数组加载，如果defaultData是有开始，它控制台正确，但仍然不应用类。

useEffect(() => {
if (props.data.dataTree.customer.source_of_funds.source_of_funds__list) {

source_of_funds__list__checked =
props.data.dataTree.customer.source_of_funds.source_of_funds__list;

}
console.log("source_of_funds__list__checked", source_of_funds__list__checked);
}, []);

我很确定这与渲染周期和我使用useEffect的一些错误有关。

有什么我可能错过的指示吗?

Answer 1

我认为你滥用了react钩子表单。在useffect中，使用'setValue'来更新初始数组，而不是使用'watch'，取而代之的是'useWatch'。试试吧，希望能帮到你!