Ao executar os comandos do capítulo 05.Enviando pratos para API da aula 06.Aquela sobre formData, o formulário realiza requisições sem parar:
Segui a aula, mas não consegui resolver esse problema.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Ao executar os comandos do capítulo 05.Enviando pratos para API da aula 06.Aquela sobre formData, o formulário realiza requisições sem parar:
Segui a aula, mas não consegui resolver esse problema.
Salve, Jefferson!
Consegue compartilhar o código do FormularioPrato.tsx?
Dando um chute no escuro, eu diria que falta colocar os métodos a busca das tags e dos restaurantes dentro do useEffect, desse jeito:
useEffect(() => {
http.get<{ tags: ITag[] }>('tags/')
.then(resposta => setTags(resposta.data.tags))
http.get<IRestaurante[]>('restaurantes/')
.then(resposta => setRestaurantes(resposta.data))
}, [])
Fala Vinicios, ao observar seu código, notei que no meu faltava apenas iniciar o array vazio
import { Box, Button, FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material'
import React, { useEffect, useState } from 'react'
import http from '../../../http'
import IRestaurante from '../../../interfaces/IRestaurante'
import ITag from '../../../interfaces/ITag'
const FormularioPrato = () => {
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[] }>('tags/')
.then(resposta => setTags(resposta.data.tags))
http.get<IRestaurante[]>('restaurantes/')
.then(resposta => setRestaurantes(resposta.data))
}) {*/ <= Aqui faltou iniciar o array vazio '[]'/*}
const selecionarArquivo = (evento: React.ChangeEvent<HTMLInputElement>) => {
if (evento.target.files?.length) {
setImagem(evento.target.files[0])
} else {
setImagem(null)
}
}
const aoSubmeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
evento.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)
}
http.request({
url: 'pratos/',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data'
},
data: formData
})
.then(() => {
setNomePrato('')
setDescricao('')
setTag('')
setRestaurante('')
alert('Prato cadastrado com sucesso!')
})
.catch(erro => console.log(erro))
}
return (
<>
{/*Conteúdo da página*/}
<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={evento => setNomePrato(evento.target.value)}
id="standard-basic"
label="Nome do Prato"
variant="standard"
fullWidth
required
margin="dense"
/>
<TextField
value={descricao}
onChange={evento => setDescricao(evento.target.value)}
id="standard-basic"
label="Descrição do Prato"
variant="standard"
fullWidth
required
margin="dense"
/>
<FormControl margin="dense" fullWidth>
<InputLabel id="select-tag">Tag</InputLabel>
<Select labelId="select-tag" value={tag} onChange={evento => setTag(evento.target.value)}>
{tags.map(tag => <MenuItem key={tag.id} value={tag.value}>
{tag.value}
</MenuItem>)}
</Select>
</FormControl>
<FormControl margin="dense" fullWidth>
<InputLabel id="select-restaurante">Restaurante</InputLabel>
<Select labelId="select-restaurante" value={restaurante} onChange={evento => setRestaurante(evento.target.value)}>
{restaurantes.map(restaurante => <MenuItem key={restaurante.id} value={restaurante.id}>
{restaurante.nome}
</MenuItem>)}
</Select>
</FormControl>
<input type="file" onChange={selecionarArquivo} />
<Button sx={{ marginTop: 1 }} type="submit" fullWidth variant="outlined">Salvar</Button>
</Box>
</Box>
</>
)
}
export default FormularioPratoObrigado pela ajuda!