Executando verificação de segurança...
Em resposta a [Não disponível]
0

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.

Carregando publicação patrocinada...