La solicitud de correo Axios no se salva

código completo Estoy creando una aplicación de receta con reaccion y axios. Cuando intento agregar nueva receta enviando el formulario en el formulario.js, no se ahorra y se muestra a lo largo de las otras recetas, sólo se imprime en la consola. Supongo que es algo con los axios. ¿Alguna idea? Agradecería mucho cualquier consejo.

form.js

import React from 'react'
import './Form.css'
import {RecipeContext} from './RecipeContext';
import {useContext,useState} from 'react';
import axios from 'axios';

function Form() {
    const [nazev,setNazev]=useState('');
    const[uvodni,setUvodni]=useState('');
    const[ingredience,setIngredience]=useState('');
    const[postup,setPostup]=useState('');
    const[time,setTime]=useState(0);
    const [score,setScore]=useState(0);
    const{recipes,setRecipes}=useContext(RecipeContext)
    const onSubmit=e=>{
      const newRecipe={id:Math.floor(Math.random() * 100000000),
      description:postup,name:nazev,duration:time,info:uvodni,score:+score}
      
      e.preventDefault()
      
      axios.post("https://cookbook.ack.ee/api/v1/recipes", newRecipe)
      .then(res => setRecipes(res.data))
      .catch(error => console.log(error));
      
    
    }
    
    return (
        <>
        +
        

          
Název receptu
           setNazev(e.target.value)}/>
           setUvodni(e.target.value)}/>
          
Ingredience
           setIngredience(e.target.value)}/>
          + Přidat
           setPostup(e.target.value)}/>
          setTime(e.target.value)}/>
        
        
    )
          }

export default Form

recetacontext.js

import React,{useState,useEffect,createContext,useReducer} from 'react';
import axios from 'axios';
import AppReducer from './AppReducer'


export const RecipeContext=createContext([[],() => {}]);

export default function RecipeProvider(props) {
    const[recipes,setRecipes]=useState([])
    const[state,dispatch]=useReducer(AppReducer,recipes)
    function addRecipe(id){
      dispatch({
        type:'ADD_RECIPE',
        payload:id
      })
    }
  
    useEffect(() => {
  axios.get('https://cookbook.ack.ee/api/v1/recipes?limit=10&offset=0')
  .then(res=>setRecipes(res.data))
  console.log(recipes)
    })   

    
  

    
    return (
       

    {props.children}

      
    )
}

recetalista.js

import {RecipeContext} from './RecipeContext';
import {useContext} from 'react';
import Recipe from './Recipe';
import './RecipeList.css'
import {Link} from 'react-router-dom'

function RecipeList() {

 const {recipes}=useContext(RecipeContext)
  
  return (
<>

    
Recepty
    
Počet receptů:{recipes.length}
   
+
 


{recipes.map(item=>(
    
))}



  );
}

export default RecipeList;

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codemaster89

2 Respuestas:

• El problema parece estar en tu manejo de la respuesta de la petición POST en el archivo Form.js. Cuando realizas la petición POST con Axios y recibes una respuesta exitosa, quieres guardar la nueva receta en el estado recipes del contexto, pero estás manejando de forma incorrecta la respuesta.

  En lugar de intentar guardar res.data directamente en recipes, debes añadir la nueva receta a la lista existente de recetas. Para hacer esto correctamente, debes modificar tu función onSubmit de la siguiente manera:

  javascript
  const onSubmit = e => {
      e.preventDefault();
      const newRecipe = {
          id: Math.floor(Math.random() * 100000000),
          description: postup,
          name: nazev,
          duration: time,
          info: uvodni,
          score: +score
      };
  
      axios.post("https://cookbook.ack.ee/api/v1/recipes", newRecipe)
          .then(res => {
              const updatedRecipes = [...recipes, newRecipe]; // Agregar la nueva receta a la lista existente
              setRecipes(updatedRecipes);
          })
          .catch(error => console.log(error));
  };
  

  De esta manera, al recibir una respuesta exitosa del servidor con la nueva receta que fue guardada correctamente, agregarás esta nueva receta a la lista de recetas existente en el estado recipes. Así se reflejará correctamente en tu aplicación de recetas.

  ¡Prueba este cambio y verifica si ahora se guarda correctamente la nueva receta!

  Respondida el Dec 20, 2020 a las 16:50 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Problema:

  La solicitud de correo Axios no guarda los datos nuevos en la base de datos.

  Solución:

  Hay algunos problemas en el código proporcionado:

  1. Enrutamiento:

  Parece que estás utilizando React Router para la navegación, pero no tienes ninguna ruta definida para /pridat-recept. Debes definir una ruta en tu archivo App.js o index.js para que la navegación funcione correctamente.

  2. Axios:

  En tu función onSubmit, estás enviando la solicitud a la URL incorrecta. La URL correcta debería ser:

  
  "https://cookbook.ack.ee/api/v1/recipes"
  

  En lugar de:

  
  "https://cookbook.ack.ee/api/v1/recipes/"
  

  3. Manejo de errores:

  No estás manejando correctamente los errores en tu solicitud de Axios. Debes usar el bloque try-catch para capturar cualquier error y mostrar un mensaje de error al usuario.

  Código actualizado:

  
  import React from 'react'
  import './Form.css'
  import {RecipeContext} from './RecipeContext';
  import {useContext,useState} from 'react';
  import axios from 'axios';
  
  function Form() {
      const [nazev,setNazev]=useState('');
      const[uvodni,setUvodni]=useState('');
      const[ingredience,setIngredience]=useState('');
      const[postup,setPost]=useState('');
      const[time,setTime]=useState(0);
      const [score,setScore]=useState(0);
      const{recipes,setRecipes}=useContext(RecipeContext)
      const onSubmit=async e=>{
        e.preventDefault()
  
        try {
          const newRecipe={id:Math.floor(Math.random() * 100000000),
          description:postup,name:nazev,duration:time,info:uvodni,score:+score}
  
          const res = await axios.post("https://cookbook.ack.ee/api/v1/recipes", newRecipe)
          setRecipes(res.data)
        } catch (error) {
          console.log(error);
          alert('Nepodařilo se přidat recept. Zkuste to znovu.')
        }
      }
  
      return (
          <>
          +
          
  
            
  Název receptu
            setNazev(e.target.value)}/>
            setUvodni(e.target.value)}/>
            
  Ingredience
            setIngredience(e.target.value)}/>
            +
            setPost(e.target.value)}/>
            setTime(e.target.value)}/>
          
  
      )
            }
  
  export default Form
  

  Respondida el Dec 20, 2020 a las 16:54 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---