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

【问题标题】：transferproduct.js:35 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'preventDefault') ReactJStransferproduct.js:35 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'preventDefault') ReactJS
【发布时间】：2022-06-13 20:04:46
【问题描述】：

当我单击 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 上做了所有可用的解决方案，但我的错误仍然没有解决。

screnshot of error

【问题讨论】：

你没有将事件传递给handleSubmit

标签： javascript reactjs