Não consigo armazenar a informação digitada para enviar para API quando é uma propriedade de um objeto que está dentro de outro objeto,ex:
Venda = { id: number; vlrVenda: number; cliente: Pessoa; }
Pessoa = { id: number; nome: string; cpfCnpj: string; }
OBS: Quando digito qualquer coisa nos campos referentes ao autor o campo não é alterado, como se nada estivesse sendo digitado.
export type Processo = {
id: number;
numero: number;
vlrCausa: number;
autor: Autor;
}
export type Autor = {
id: number;
nome: string;
cpfCnpj: string;
tipoPessoa: string;
}
import axios, { AxiosRequestConfig } from "axios";
import { ChangeEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Processo } from "types/processo";
import { BASE_URL } from "utils/requests";
type Props = {
id: string;
}
function FormProcesso({ id }: Props) {
const navigate = useNavigate();
const [processo, setProcesso] = useState<Processo>({
id: 0,
numero: 0,
vlrCausa: 0.0,
autor: {
id: 0,
nome: '',
cpfCnpj: '',
tipoPessoa: 'AUTOR'
}
});
useEffect(() => {
if (id !== undefined) {
findProcesso(id)
console.log(id)
}
}, [id])
function onChange(e: ChangeEvent<HTMLInputElement>) {
setProcesso({
...processo,
[e.target.name]: e.target.value,
});
console.log(e.target.name + ':' + e.target.value);
}
async function onSubmit(e: ChangeEvent<HTMLFormElement>) {
e.preventDefault();
const config: AxiosRequestConfig = {
baseURL: BASE_URL,
method: 'POST',
url: '/processos',
data: {
"numero": (e.target as any).numero.value,
"autor": {
"nome": (e.target as any).nome.value,
"cpfCnpj": (e.target as any).cpfCnpj.value,
"tipoPessoa": processo.autor.tipoPessoa
},
"vlrCausa": (e.target as any).vlrCausa.value
}
}
console.log(config);
axios(config).then(response => {
navigate("/processos");
});
}
async function findProcesso(id: String) {
const response = await axios.get(`${BASE_URL}/processos/${id}`)
setProcesso(response.data)
}
return (
<> ..código omitido
<form className="row g-3" onSubmit={onSubmit}>
<input type="hidden" />
<div className="col-md-6">
<label className="form-label">Núm. Processo</label>
<input type="text" className="form-control" name="numero"
value={processo.numero}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e)}
placeholder="Digite o nome da empresa contratada" required />
</div>
<div className="col-md-6">
<label className="form-label">Valor da Causa</label>
<input type="text" className="form-control" name="vlrCausa"
value={processo.vlrCausa}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e)}
placeholder="Digite o valor da causa" required />
</div>
<div className="col-md-6">
<label className="form-label">Autor</label>
<input type="text" className="form-control" name="nome"
value={processo.autor.nome}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e)}
placeholder="Digite o nome do autor do processo" required />
</div>
<div className="col-md-6">
<label className="form-label">CPF / CNPJ</label>
<input type="text" className="form-control" name="cpfCnpj"
value={processo.autor.cpfCnpj}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e)}
placeholder="Digite o número do cpf/cnpj" required />
</div>
</form>
...código omitido
</>
);
}
export default FormProcesso;