反应onSubmit e.preventDefault有时不起作用+ Axios

编程问答 2022-06-10

问题描述

现在，我在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）内部的警报会触发。对于大文件，该请求被询问了大约四次，而且从未到达捕获部分。

发送帮助

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axiosonsubmitpage-refreshreactjsreactjs