reactjs - 反应 onSubmit e.preventDefault() 有时不起作用 + Axios
问题描述
现在我在 React 中遇到了这个奇怪的问题,其中带有 e.preventDefault() 的 onSubmit 函数有时会避免刷新页面,有时则不会。
我创建了两个挂钩来跟踪上传的文件及其进度条。
const [ uploadedFiles, setUploadedFiles ] = useState([]);
const [ uploadPercentages, setUploadPercentages ] = useState([]);
onSubmit 函数使用 Axios 向后端发出请求。
const onSubmit = async e => {
e.preventDefault();
if(!!file) {
// Show file box on screen
let index = addUpload(file);
const formData = new FormData();
formData.append("file", file);
try {
await axios.post("/upload_video", formData, {
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
let progress = uploadPercentages.concat(0)
progress[index] = Math.round((loaded * 100) / total)
setUploadPercentages(progress);
}
})
} catch(err) {
// Handlers
}
}
return false // trying something different to avoid refresh
}
以防万一,addUpload 函数与问题的根源几乎没有关系。我把它拿走来测试它,事情的表现是一样的。
如果有人可以提供帮助,我将不胜感激。
编辑:
这是表格。
<form className="choose-file" onSubmit={onSubmit}>
<div className="file-container">
{ file ?
<p> { file.name } </p>
:
<label className="file-label" htmlFor="customFile">
<input type="file" className="file-input" id="customFile" onChange={ onChange }/>
<p><i className="fas fa-cloud-upload-alt"></i></p>
<p>Click here to select file</p>
</label>
}
</div>
<div className="file-options">
<input type="submit" value="Upload" className="file-input" id="customFile"/>
<button type="button" onClick={ removeFile }>Delete</button>
</div>
</form>
“file”是第三个钩子,只是为了向用户显示他们刚刚选择的文件的名称。
编辑2:
问题似乎只在文件大小大于 100MB 时出现。此外,一旦问题出现,它就会开始发生在每个文件上,无论其大小。
例如,如果我上传一个 7MB 的文件,页面不会刷新,如果我然后尝试一个 100MB 的文件,它会开始为每个即将到来的文件刷新,并且在 axios 发布之后的所有控制台日志都不会再看到。
编辑3:
由于我在 Flask 上运行本地后端,因此我尝试将其与 React 应用程序断开连接以查看会发生什么。对于小文件,只要求后端请求一次,并且触发 catch(err) 中的警报。对于大文件,请求被询问了大约四次,它永远不会到达捕获部分。
发送帮助
解决方案
我猜问题不在addUpload
. async
你可以试试这个方法
const onSubmit = (e) => {
e.preventDefault();
// After collecting formData ...
// in the *try* block do this
const post = axios.post("/upload_video", formData, {
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
let progress = uploadPercentages.concat(0)
progress[index] = Math.round((loaded * 100) / total)
setUploadPercentages(progress);
}
post.then(() => {alert('Done posting')}) // inside this you can do whatever you want to do after axios.post
}
**编辑 : **
由于您在评论中提到该解决方案不起作用,因此这里有一个替代方案。
声明一个新函数
const async post = () => {
// Get the formData here
await axios.post("/upload_video", formData, {
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
let progress = uploadPercentages.concat(0)
progress[index] = Math.round((loaded * 100) / total)
setUploadPercentages(progress);
}
}
// Now in the onSubmit function
const onSubmit = (e) => {
e.preventDefalut();
post()
}
这是我的最终解决方案。希望这有效...
推荐阅读
- asp.net-core - 模型在 MVC 中究竟应该包含什么?
- rust - 移动后改变结构的字段
- swift - 为什么我的收藏视图单元格如此难以点击?
- c++ - 对象传输:通用引用或按值
- python - 在 Python3 ubuntu 上安装 tkinter
- nginx - Socket.io + Flask 和前端 HTTPS 反向代理 & 后端 HTTP 反向代理
- c# - 如何与 EF Core 建立关系 (0,N:1,1)?
- python - 首先根据长度对字符串元素列表进行排序,然后根据字母顺序对具有匹配长度的元素进行排序
- c# - 将键值对的 SQL 行序列化为 JSON 对象
- javascript - 反应原生不显示导入的标签