Fala pessoal, uma boa noite. Agradeço muito a respostas de vocês. Depois de muitas tentativas hoje de manhã logo cedo consegui resolver o problema. Era basicamente o que vocês falaram, mas vou mostrar a solução que fiz aqui:
export default function CategoriaForm() {
const navigate = useNavigate();
const { id } = useParams();
const isNewCategoria = !id;
const formSchema = z.object({
categoria: z.string().min(2, {
message: "A categoria deve ter mais de 2 caracteres.",
}),
});
const { data } = useQuery(['categoria', id], () => categoriaService.buscar(id), {
enabled: !!id,
})
/*
Nesse caso o problema consistia basicamente nesse ponto. Conforme vocês explicaram o campo id tinha um estado '' e quando eu atualizava chamando a API ele ficava por alguns instantes mostrando o erro de uncontrolled form input.
Como o campo de id não precisava está definido tirei a definição dele e só fiz a validação para o campo categoria.
*/
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
values: {
categoria: data ? data.data.categoria : ""
}
});
function onSubmit(values: z.infer<typeof formSchema>) {
/*
Nesse caso aqui eu verifico se é ou não uma nova categoria, caso não seja o id vai ser nulo e no backend será atribuido para ele um valor. Caso contrário será um update e eu irei passar o id para somente realizar o update no backend.
*/
const categoriaData: Categoria = {
id: isNewCategoria ? null : id,
categoria: values.categoria,
};
const salvarPromise = isNewCategoria ? categoriaService.salvar(categoriaData) : categoriaService.salvar(categoriaData);
salvarPromise.then(() => {
toast("Sucesso", {
description: isNewCategoria ? "Categoria cadastrada com sucesso" : "Categoria atualizada com sucesso",
});
navigate("/categorias");
}).catch(error => {
tratarErros("Erro ao salvar nova categoria", error);
});
}
return (
<Page title={isNewCategoria ? "Nova Categoria" : "Editar Categoria"}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full text-left mt-2">
<FormField control={form.control} name="categoria" render={({ field }) => (
<FormItem >
<FormLabel>Nome da categoria</FormLabel>
<FormControl>
<Input placeholder="Minha categoria" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)} />
<Button type="submit">{isNewCategoria ? "Cadastrar" : "Atualizar"}</Button>
</form>
</Form>
</Page>
);
}
Mas uma vez pessoal, muito obrigado pelas respostas. Tamo junto.