Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

PUT http://localhost:8000/api/v2/11/ 404 (Not Found)

O meu localhost não está conseguindo fazer a edição de um restaurante, segue meu código:

FormularioRestaurante

import { TextField, Button } from "@mui/material"
import axios from "axios"
import { useEffect, useState } from 'react'
import { useParams } from "react-router-dom";
import IRestaurante from "../../../interfaces/IRestaurante";

const FormularioRestaurante = () => {

    const parametros = useParams();

    useEffect(() => {
        if (parametros.id) {
            axios.get<IRestaurante>(`http://localhost:8000/api/v2/restaurantes/${parametros.id}/`)
                .then(resposta => setNomeRestaurante(resposta.data.nome))
        }
    }, [parametros])

    const [nomeRestaurante, setNomeRestaurante] = useState('')

    const aoSubmeterForm = (evento: React.FormEvent<HTMLFormElement> ) => {
        evento.preventDefault()
        
        if (parametros.id) {
            axios.put(`http://localhost:8000/api/v2/${parametros.id}/`, {
                nome: nomeRestaurante
            })
    
            .then(() => {
                alert('Restaurante atualizado com sucesso!')
            })
        } else {
            axios.post('http://localhost:8000/api/v2/restaurantes/', {
                nome: nomeRestaurante
            })
    
            .then(() => {
                alert('Restaurante cadastrado com sucesso!')
            })
        }
    }

    return (<form onSubmit = { aoSubmeterForm } >
        <TextField value = {nomeRestaurante} 
        onChange = {evento => setNomeRestaurante(evento.target.value)} label="Nome do restaurante" variant="standard" />
        <Button type = "submit" variant="outlined">Enviar</Button>
    </form>)
}

export default FormularioRestaurante;

Meu console aparece o 404 e o erro de in promise, como se não tivesse acesso a API.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Esse erro acontece toda vez que envio o formulário com a edição. Eu fiz o try it out na API, com o ID "11" porém ainda não consegui.

1 resposta
solução!

Oi pessoal, o erro foi que eu esqueci de especificar a rota na condicional if que fizemos, na linha 24.

O correto é:

if (parametros.id) {
            axios.put(`http://localhost:8000/api/v2/restaurantes/${parametros.id}/`, {
                nome: nomeRestaurante
            })

No meu código antigo estava:

if (parametros.id) {
            axios.put(`http://localhost:8000/api/v2/${parametros.id}/`, {
                nome: nomeRestaurante
            })

Obrigado, prestem atenção nos seus códigos! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software