Pessoal, durante o último desafio fiquei com dúvida apenas no select de restaurante, mesmo fazendo uma segunda requisição para trazer o nome do restaurante, não funcionou, segue código :
...
function FormularioPrato() {
const parametros = useParams();
const [nomePrato, setNomePrato] = useState('');
const [descricao, setDescricao] = useState('');
const [tag, setTag] = useState('');
const [restaurante, setRestaurante] = useState('');
const [imagem, setImagem] = useState<File | null>(null);
const [tags, setTags] = useState<ITag[]>([]);
const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([]);
useEffect(() => {
http
.get<{ tags: ITag[] }>('v2/tags/')
.then((response) => setTags(response.data.tags));
http
.get<IRestaurante[]>('v2/restaurantes/')
.then((response) => setRestaurantes(response.data));
}, []);
useEffect(() => {
if (parametros.id) {
http.get<IPrato>(`v2/pratos/${parametros.id}/`).then((response) => {
setNomePrato(response.data.nome);
setDescricao(response.data.descricao);
setTag(response.data.tag);
http
.get<IRestaurante>(`v2/restaurantes/${response.data.restaurante}/`)
.then((response) => setRestaurante(response.data.nome));
});
}
}, [restaurantes, parametros]);
function selecionarArquivo(event: React.ChangeEvent<HTMLInputElement>) {
if (event.target.files?.length) {
setImagem(event.target.files[0]);
} else {
setImagem(null);
}
}
function aoSubmeterForm(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData();
formData.append('nome', nomePrato);
formData.append('descricao', descricao);
formData.append('tag', tag);
formData.append('restaurante', restaurante);
if (imagem) {
formData.append('imagem', imagem);
}
if (parametros.id) {
http
.request({
url: `v2/pratos/${parametros.id}/`,
method: 'PUT',
headers: {
'Content-Type': 'multpart/form-data',
},
data: formData,
})
.then(() => {
alert('Prato atualizado com sucesso!');
})
.catch((erro) => console.log(erro));
} else {
http
.request({
url: 'v2/pratos/',
method: 'POST',
headers: {
'Content-Type': 'multpart/form-data',
},
data: formData,
})
.then(() => {
alert('Prato cadastrado com sucesso!');
setNomePrato('');
setDescricao('');
setTag('');
setRestaurante('');
})
.catch((erro) => console.log(erro));
}
}
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
}}>
<Typography component='h1' variant='h6'>
Formulário de Pratos
</Typography>
<Box component='form' sx={{ width: '100%' }} onSubmit={aoSubmeterForm}>
<TextField
value={nomePrato}
onChange={(event) => setNomePrato(event.target.value)}
id='standard-basic'
label='Nome do Prato'
variant='standard'
margin='dense'
fullWidth
required
/>
<TextField
value={descricao}
onChange={(event) => setDescricao(event.target.value)}
id='standard-basic'
label='Descrição do Prato'
variant='standard'
margin='dense'
fullWidth
required
/>
<FormControl margin='dense' fullWidth>
<InputLabel id='select-tag'>Tag</InputLabel>
<Select
labelId='select-tag'
value={tag}
onChange={(event) => setTag(event.target.value)}>
{tags.map((tag) => (
<MenuItem key={tag.id} value={tag.value}>
{tag.value}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl margin='dense' fullWidth>
<InputLabel id='select-resturante'>Restaurante</InputLabel>
<Select
labelId='select-restaurante'
value={restaurante}
onChange={(event) => setRestaurante(event.target.value)}>
{restaurantes.map((restaurante) => (
<MenuItem key={restaurante.id} value={restaurante.id}>
{restaurante.nome}
</MenuItem>
))}
</Select>
</FormControl>
...
![]( )