Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[BUG]Carregamento infinito

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: Erro nas requisiçõesSegui a aula, mas não consegui resolver esse problema.

2 respostas

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))
    }, [])
solução!

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!