反应 onSubmit e.preventDefault() 有时不起作用 + Axios答案

【问题标题】：React onSubmit e.preventDefault() not working sometimes + Axios反应 onSubmit e.preventDefault() 有时不起作用 + Axios
【发布时间】：2020-10-04 07:13:40
【问题描述】：

现在我在 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) 中的警报。对于大文件，请求被询问了大约四次，并且从未到达捕获部分。

发送帮助

【问题讨论】：

也向我们展示您的表格。
@cybercoder 确定！
您可以尝试将onSubmit函数中的async去掉，并相应更改axios代码
@deepakgupta191199 是的，我试过了，但没有用。 axios 方法后的控制台日志也不显示
如果你这样调用：form onsubmit={e=>{e.preventDefault(); onSubmit()}} 并从你的函数中删除事件会发生什么？

标签： reactjs axios page-refresh onsubmit

【解决方案1】：

我猜问题不是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()
}

这是我的最终解决方案。希望这行得通...

【讨论】：

谢谢，但这不起作用，尽管要提到的重要一点是 .then() 中的警报从未出现过。
请尝试新的编辑版本
对不起，它没有用。我再次尝试了 .then() 中的警报以查看它是否弹出，但也没有。

【解决方案2】：

我一直面临将箭头函数用作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", 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 }

【讨论】：

【解决方案3】：

最后，问题变成了将文件保存在 React 的公用文件夹中这样简单的事情。

我的猜测是，每次在此文件夹中检测到更改时，都会导致整个项目刷新。对于小对象，时间几乎为零，但对于大文件，需要一段时间，导致组件也刷新。

【讨论】：