Reactjs 在Submit 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 post之后，所有控制台日志都不会再次出现

编辑3：

因为我在Flask上运行本地后端，所以我尝试将其与React应用程序断开，以查看发生了什么。对于小文件，对后端的请求只被请求一次，catcherr内部的警报将触发。对于大文件，请求被询问了大约四次，但从未到达捕获部分

---

发送帮助

我想问题不在于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 
}

**编辑：**

由于您在评论中提到解决方案不起作用，这里有一个替代方案

声明一个新函数

---

这是我的最终解决方案。希望这能奏效…

我想问题不在于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 
}

**编辑：**

由于您在评论中提到解决方案不起作用，这里有一个替代方案

声明一个新函数

---

这是我的最终解决方案。希望这能起作用…

我一直面临使用箭头函数作为处理程序的问题， 尝试将其转换为正常功能

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 }

---

我一直面临使用箭头函数作为处理程序的问题， 尝试将其转换为正常功能

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 }

---

最后，问题很简单，只需将文件保存在React的公用文件夹中

---

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

最后，问题变得很简单，只需将文件保存在React的公用文件夹中即可

---

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

也向我们显示您的表单。@cybercoder当然！您可以尝试删除onSubmit函数中的async并更改axios代码accordingly@deepakgupta191199是的，我试过了，但没用。axios方法之后的控制台日志不会显示。如果这样调用会发生什么：form onsubmit={e=>{e.preventDefault；onsubmit}}并从函数中删除事件？也显示表单。@cybercoder确定！您可以尝试删除onSubmit函数中的async并更改axios代码accordingly@deepakgupta191199是的，我试过了，但没用。axios方法之后的控制台日志不会显示，如果这样调用会发生什么：form onsubmit={e=>{e.preventDefault；onsubmit}}并从函数中删除事件？谢谢，但这不起作用，虽然有一点很重要，那就是.then中的警报从未出现。请尝试新编辑的版本Corry，但它不起作用。我在中尝试了警报。然后再次尝试查看它是否会弹出，但也没有弹出。谢谢，但这不起作用，尽管需要指出的是。中的警报从未出现。请尝试新编辑的版本Corry，但它不起作用。我尝试了在中的警报。然后再次查看它是否弹出，但也没有。