转移产品.js：35 未捕获(在承诺中) 类型错误：无法读取未定义的属性(读取"防止默认") ReactJS

Question

当我点击传输按钮时，我得到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>