React onClick with axios 发送后刷新

Posted 2023-05-08

【中文标题】React onClick with axios 发送后刷新

【英文标题】：React onClick with axios is refresh after sent

【发布时间】：2021-08-06 03:58:00

【问题描述】：

在 onClick 中，我调用该函数并使用 preventDefault() 但网页已刷新。 我不确定它是否与 axios 有关，因为当它完成获取网页时会立即刷新。

function submit(event)
    event.preventDefault();
    
    const formData = new FormData();
    formData.append("name", name);

    axios(
        method: "POST",
        url: "http://localhost:5000/insert-data",
        headers: "Content-Type": "multipart/form-data",
        data: formData,
        onUploadProgress: (e)=>
            if(e.lengthComputable)
                console.log(((e.loaded * 100 / e.total)+"").split(".")[0])
            
        
    ).then(res=>
        console.log(res.data);
    )

表格

<input type="text" placeholder="name" onChange=e=>setName(e.target.value) /> <br />
<input type="file" onChange=e=>setVideo(e.target.files[0]) /> <br />
<button type="button" onClick=submit>Insert Data</button>

【问题讨论】：

您的标记中是否有表单标签？

不是，一开始我以为是form标签，但是删除后还是一样的问题。

需要注意的一点是，如果表单最终没有任何结果，您可以随时取出表单包装器。看起来你所有的输入数据都在 React 的状态下被跟踪。您可以直接在 submit

中使用该数据

我使用 FormData 因为表单中有文件输入

【参考方案1】：

const submit=(event)=>
    event.preventDefault();
    
    const formData = new FormData();
    formData.append("name", name);

    axios(
        method: "POST",
        url: "http://localhost:5000/insert-data",
        headers: "Content-Type": "multipart/form-data",
        data: formData,
        onUploadProgress: (e)=>
            if(e.lengthComputable)
                console.log(((e.loaded * 100 / e.total)+"").split(".")[0])
            
        
    ).then(res=>
        console.log(res.data);
    )

尝试添加表单标签是否可以解决此问题

<form onSubmit=submit>
    <input type="text" placeholder="name" onChange=e=>setName(e.target.value) /> <br />
    <input type="file" onChange=e=>setVideo(e.target.files[0]) /> <br />
    <button type="submit">Insert Data</button>
</form>

【讨论】：

你不需要把await放在axios调用之前，因为OP使用then来解决promise

【参考方案2】：

我的问题有一个答案，因为当我将文件提交到 api 时，文件名已经存在于我的上传文件夹中，所以我用唯一的文件名解决了它。

但我不知道为什么，因为来自 api 的响应是相同的，它不是错误

这是我的 api (Nodejs)

req.files.video.mv(path.join(__dirname + "/../public/videos/" + req.files.video.name), err=>
        if(err) throw err;

        dbcon.collection("user").update(_id: ObjectId(id), $push: level: 
            name, video: req.files.video.name
        , (err, doc)=>
            if(err) throw err;
            res.json(status: "success")
        )
    )