React Hook Form初始化值：CheckboxGroup如何匹配已选case_type数组？

不需要用useFieldArray，它是用来处理动态增删表单字段的，你的场景直接通过react-hook-form的Controller结合Chakra UI的CheckboxGroup就能实现选中状态绑定，具体步骤如下：

1. 定义表单类型（TypeScript） #

先明确表单字段的类型，确保类型匹配：

type JudicialCauseForm = {
  case_type: number[];
  // 其他表单字段可在这里补充
};

2. 初始化useForm #

将获取到的judicialCause.case_type作为case_type字段的默认值：

import { useForm, Controller } from "react-hook-form";
import { CheckboxGroup, Checkbox } from "@chakra-ui/react";

// 假设你已获取到judicialCause和caseTypes选项数组
// caseTypes示例：const caseTypes = [{ id: 2, label: "类型2" }, { id:4, label:"类型4" }, ...];

const { control, handleSubmit } = useForm<JudicialCauseForm>({
  defaultValues: {
    case_type: judicialCause.case_type, // 传入你的数字数组，比如[2,4,5]
  },
});

3. 渲染CheckboxGroup并绑定表单值 #

用Controller包裹CheckboxGroup，将表单的case_type字段与复选框组的选中状态绑定：

<form onSubmit={handleSubmit((data) => console.log(data))}>
  <Controller
    name="case_type"
    control={control}
    render={({ field }) => (
      <CheckboxGroup value={field.value} onChange={field.onChange}>
        {caseTypes.map((type) => (
          <Checkbox key={type.id} value={type.id}>
            {type.label}
          </Checkbox>
        ))}
      </CheckboxGroup>
    )}
  />
  
  {/* 其他表单元素和提交按钮 */}
</form>

关键说明 #

• CheckboxGroup的value接收数组类型，会自动匹配所有value在数组内的Checkbox并设为选中状态
• Controller负责将react-hook-form的表单状态与Chakra组件联动，field.value是当前表单值，field.onChange会更新表单值
• 确保Checkbox的value类型和case_type数组的元素类型一致（这里都是数字，若为字符串需统一类型）

内容的提问来源于stack exchange，提问作者fedebelve