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.
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 FormularioPrato
Obrigado pela ajuda!