React onClick with axios 发送后刷新答案

【问题标题】：React onClick with axios is refresh after sentReact onClick with axios 发送后刷新
【发布时间】：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 因为表单中有文件输入

标签： javascript reactjs axios preventdefault express-fileupload

【解决方案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"})
        })
    })

【讨论】：