transferproduct.js:35 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'preventDefault') ReactJS

Question

當我單擊 transfwer 按鈕時，我收到 typeError。 這是我的代碼 transferproduct.js

import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
// import { warning } from 'react-router/lib/router';

const props = JSON.parse(localStorage.getItem('products'));

const TransferProduct = () => {
  const [product, setProduct] = useState([]);

  const [data, setData] = useState({
    id: '',
    oname: '',
    area: '',
  });

  const handleChange = (e) => {
    e.preventDefault();

    const value = e.target.value;
    setData({
      ...data,
      [e.target.name]: value,
    });
  };

  const handleSubmit = async (e) => {
    const userData = {
      id: data.id,
      newOwner: data.oname,
      newArea: data.area,
    };
    e.preventDefault();
    const { datas } = await axios.get(
      'http://localhost:8080/api/QueryProductById/' + data.id
    );

    let parseData = JSON.parse(datas);

    setProduct(parseData);

    console.log('hi');

    if (product.cost < props.budget) {
      console.log('error');
    } else {
      axios
        .put('http://localhost:8080/api/TransferProduct/' + data.id, userData)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            console.log(error.response);
            console.log('server responded');
          } else if (error.request) {
            console.log('network error');
          } else {
            console.log(error);
          }
        });
    }
  };

  return (
    <div>
      <form>
        <label htmlFor='header-search'>
          <span className='visually-hidden'>From</span>
        </label>
        <input
          type='text'
          name='id'
          value={data.id}
          placeholder='ID'
          onChange={handleChange}
        />
        <label htmlFor='header-search'>
          <span className='visually-hidden'>TO</span>
        </label>
        <input
          type='text'
          name='oname'
          value={data.oname}
          placeholder='Enter New Owner'
          onChange={handleChange}
        />

        <label htmlFor='header-search'>
          <span className='visually-hidden'>TO</span>
        </label>
        <input
          type='text'
          name='area'
          value={data.area}
          placeholder='Enter new Location'
          onChange={handleChange}
        />

        <button type='submit' onClick={handleSubmit}>
          Transfer
        </button>
      </form>
    </div>
  );
};

export default TransferProduct;

這是我得到的錯誤的屏幕截圖。 transferproduct.js:35 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'preventDefault') 我在stackoverflow上做了所有可用的解決方案，但我的錯誤仍然沒有解決。

錯誤截圖

Answer 1

您應該在<form> onSubmit事件中移動handleSubmit函數：

<form onSubmit={handleSubmit}>
...
</form>

將您的提交button聲明更改為：

 <button type='submit'>
    Transfer
</button>