更新并设置初始值以反应钩子形式

Question

我是 React/TypeScript 和 Chakra UI 的新手。我有以下问题

这里我得到当前要更新的对象：

const {
  data: judicialCause,
  isLoading,
  error,
  updateJudicialCause,
} = useJudicialCause(parseInt(id!));
const {
  register,
  control,
  handleSubmit,
  formState: { errors, isValid },
  setValue,
  reset,
  watch,
} = useForm<FormData>({ values: judicialCause, resolver: zodResolver(schema) });
const { data: caseTypes } = useCaseTypes();

界面

export default {
  id: number,
  //....,
  case_type: number[]
}

最后是麻烦。我想渲染 caseTypes 的所有可能值并设置在当前司法原因对象中选择的值。该对象具有作为数字数组的相关原因。示例->

case_type: [2,4,5]

<CheckboxGroup colorScheme="green">
  {caseTypes?.results.map((ct, index) => (
    <Checkbox key={ct.id} {...register(`case_type.${index}`)}>
      {ct.name}
    </Checkbox>
  ))}
</CheckboxGroup>

我如何显示该对象的选定值？

谢谢！

我尝试使用

useFieldArray

，但它不起作用，因为它不适用于值数组。

Answer 1

您可以考虑在

defaultChecked

中添加

Checkbox

。

Chakra Ui 复选框

<CheckboxGroup colorScheme="green">
  {caseTypes?.results.map((ct, index) => (
   <Checkbox
       key={ct.id}
       {...register(`case_type.${index}`)}
       defaultChecked={judicialCause?.case_type?.includes(ct.id)}
   >
     {ct.name}
   </Checkbox>
  ))}
</CheckboxGroup>

检查

caseTypes

是否包含在

case_type

的

judicialCause

中。我添加了可选的链接运算符

?.

以提高安全性。