无法读取未定义的属性（读取“preventDefault”）

Question

我需要你的帮助。我有一个我无法解决的问题。 我是新来的。 我正在尝试将信息发送到后端。结果，我收到一个错误：Cannot read properties of undefined (reading 'preventDefault')。 我想问一下，我的错误是什么，我正在执行 POST 请求是否正确？谢谢

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}>Send</button>
    </form>
  );
};

Answer 1

您在useEffect 钩子中以及在提交时调用sendLaptop。当您这样做时，没有附加事件，因此 event 未定义，因此 event.preventDefault 也未定义。

Answer 2

看起来问题与sendLaptop 内部的event.preventDefault() 有关，因为它是从两个地方（useEffect 和onClick 处理程序）调用的。

在从useEffect 调用sendLaptop 的地方，没有传递event 变量。

你应该检查事件是否通过，然后才调用它。

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