1
resposta

[Dúvida] Como preencher o select de restaurante ao editar um prato

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>

   ...

![](Print da tela de cadastro de prato com o campo restaurante vazio )

1 resposta

Olá Matheus, quando você alterar o select você precisa fazer uma nova requisição para api que busca os restaurantes http.get<IRestaurante[]>('v2/restaurantes/').then((response) => setRestaurantes(response.data)); porém o seu código não está observando as alterações do seu estado const [tag, setTag] = useState(''); que é alteração do seu select. Minha sugestão é você colocar um useEffec obeservando as alteração do seu select conforme abaixo, acredito que assim deva funcionar.

  useEffect(() => {
    http
      .get<IRestaurante[]>('v2/restaurantes/')
      .then((response) => setRestaurantes(response.data));
  }, [tag]);