如何解决反应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>
“文件”是第三个钩子,用于向用户显示他们刚刚选择的文件的名称。
编辑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",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()
}
这是我的最终解决方案。希望这行得通...
,我在使用箭头功能作为 HANDLERS 时遇到了问题, 尝试将其转换为正常功能
async function HandelOnSubmit (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",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 }
,
最后,问题出在像将文件保存在React的公共文件夹中一样简单。
我的猜测是,每当此文件夹中检测到更改时,这都会导致整个项目刷新。对于小对象,时间几乎为零,而对于大文件,则需要一段时间,这也会导致组件刷新。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。