es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se pueden leer las propiedades de indefinido (leyendo ‘preventDefault’)

29 May, 2023 Programación

Necesito tu ayuda. Tengo un problema que no puedo resolver. Soy nuevo en esto. Estoy intentando enviar información al backend y como resultado obtengo un error: “No se pueden leer las propiedades de undefined (leyendo ‘preventDefault’)”. Quiero preguntar, ¿cuál es mi error y es correcto que esté ejecutando una solicitud POST? Gracias.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export let Form_Post = () => {
  let [name, setName] = useState('');
  let [price, setPrice] = useState('');
  let [description, setDescription] = useState('');

  let submitName = (e) => {
    setName(e.target.value);
  };

  let submitPrice = (e) => {
    setPrice(e.target.value);
  };

  let submitDescription = (e) => {
    setDescription(e.target.value);
  };

  let sendLaptop = (event) => {
    axios.post('http://localhost:8081/laptop', {
      name: name,
      price: price,
      description: description,
    });
    event.preventDefault();
    setName('');
    setPrice('');
    setDescription('');
  };

  useEffect(() => {
    sendLaptop();
  }, []);

  return (
    <form onsubmit="{sendLaptop}">
      <input type="text" value="{name}" onchange="{submitName}">
      <input type="text" value="{price}" onchange="{submitPrice}">
      <input type="text" value="{description}" onchange="{submitDescription}">
      <button onsubmit="{sendLaptop}">Enviar</button>
    </form>
  );
};
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que el objeto event no está definido en la función sendLaptop. Esto es lo que está causando el error “Cannot read properties of undefined (reading ‘preventDefault’)”.

    Para solucionar esto, necesitamos poner event como un parámetro en la función sendLaptop de la siguiente manera:

    let sendLaptop = (event) => {
   axios
     .post ('http: // localhost: 8081 / laptop', {
       nombre: nombre,
       precio: precio,
       descripción: descripción,
     })
     .then ((respuesta) => {
       console.log (respuesta);
     })
     .catch ((error) => {
       console.log (error);
     });
   event.preventDefault ();
   setName ('');
   setPrice ('');
   setDescription ('');
};

    Esta función también restablecerá los campos del formulario después de enviar la solicitud POST.

    En cuanto a si la ejecución de la solicitud POST es correcta, depende de la API de backend con la que esté trabajando. Si la API espera una solicitud POST con los datos de la computadora portátil en el cuerpo de la solicitud, entonces este código debería funcionar. Sin embargo, si la API espera que los datos de la computadora portátil se envíen de manera diferente, es posible que sea necesario modificar el código en consecuencia.

Comments are closed.