默认值RadioGroup Chakra-ui

Question

我试图为chakra的UseRadioGroup defaultValue设置一个默认值，但我做不到，这个变量companies.CODIGO是一个没有加载的对象数组，我需要为defaultValue设置一个初始值

import { Stack, useRadioGroup, FormControl } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { Control, useController, UseControllerProps } from "react-hook-form";
import { AuthContext } from "../../context/AuthContext";
import { SelectRadio } from "../SelectRadio";

interface RadioGroupProps {
  control: Control;
  name: string;
  isRequired?: boolean;
}

export function RadioGroup({ control, name, isRequired }: RadioGroupProps) {
  const { empresas, user } = useContext(AuthContext);
  const [company, setCompany] = useState('')
  console.log(empresas)
  const {
    field,
    formState: { errors }
  } = useController({
    control,
    name,
    rules: { required: { value: true, message: "Escolha uma empresa" } }
  });

  const { getRootProps, getRadioProps } = useRadioGroup({
    name,
    onChange: field.onChange,
    value: field.value,
    defaultValue: empresas[0].CODIGO
  })
  console.log(company)
  const group = getRootProps();
  return (
    <FormControl isRequired={isRequired} isInvalid={!!errors[name]} mb={6}>
      <Stack {...group} spacing="4">
        {empresas.map((value) => {
          const radio = getRadioProps({ value: (value.CODIGO).toString() })
          return (
            <SelectRadio key={value.CODIGO}  {...radio}>
              {value.RAZAO}
            </SelectRadio>
          )
        })}
      </Stack>
    </FormControl >
  )
}

Answer 1

您可以从setValue导出useRadioGroup函数，然后使用它在可用时设置默认值。

const { getRootProps, getRadioProps, setValue } = useRadioGroup({
    name,
    onChange: field.onChange,
    value: field.value
  })

useEffect(() => {
  setValue(empresas[0].CODIGO)
})