提交表单时，如何防止服务器端接收到响应后，反应被刷新？

Question

我在使用reactjs和nodejs的过程中遇到了一些问题，我想上传图片，同时把用户的输入保存到数据库中。我能够完成所有这些，但问题是，如果我完全填写表格，并点击提交按钮，数据将成功提交，但反应页面正在刷新，我的用户。e.preventDefault() 和 e.stopPropagation() 功能都是一样的，而且我还把我的 ___handleSubmit() 不过 onClick={ (e) => { this.___handleSubmit(e)}} 但都是一样的东西。

React代码

  __handleSubmit = async (e) => {
e.preventDefault();
e.stopPropagation();

const formData = new FormData();
formData.append("collection_title", this.state.collection_title);
formData.append("collection_description",this.state.collection_description);
formData.append("quiz_category", this.state.quiz_category);
formData.append("visibility", this.state.visibility);
formData.append("selectedCover", this.state.selectedCover);
formData.append("User_ID", this.state.user_data.User_ID);

quiz.createQuizCollection(formData, CollectionResponse => {
  if (CollectionResponse)
    if (CollectionResponse && CollectionResponse[0].error) {
      toast.error(`Message: ${CollectionResponse[0].message}`);
    } else {
      toast.success(`Message: ${CollectionResponse[0].message}`);
      this.setState({ Collection_ID: CollectionResponse[0].Collection_ID });
      this.props.history.push(`/create/${CollectionResponse[0].Collection_ID}`);
    }
});

};

节点代码

app.post("/api/create-collection", (req, res) => {

       if (req.files === null) {
       const col_res = {
         message: "Collection cover image can not be empty, Please Upload Cover Image",
         error: true,
         collectionStatus: false,
         nums_row: 0,
         Collection_ID: ''
       };
       return res.status(200).json({ Response: col_res }, 500, 'Content-Type', 'application/json');
   } else {

        const selectedImage = req.files.selectedCover;
        const collection_title_slug = dataValidation.convertToSlug(req.body.collection_title);
        const collection_path = __dirname+"/../client/public/images/"+collection_title_slug;

        if (!fs.existsSync(collection_path)){
            fs.mkdirSync(collection_path);
        } 
        selectedImage.mv(`${collection_path}/${selectedImage.name}`,err => {
            if (err) {
                const col_res = {
                    message: "Unable to upload image, Please Try Again",
                    error: true,
                    collectionStatus: false,
                    nums_row: 0,
                    Collection_ID: ""
                };
                return res.status(200).json( { Response: col_res }, 500, "Content-Type", "application/json" );
            } else {
                CollectionModel.CreateCollection(selectedImage.name, req.body, result => {
                    if (!result.error) {
                        return res.status(200).json({ Response: result }, 200, 'Content-Type', 'application/json');
                    } else {
                        return res.status(200).json({ Response: result }, 300, 'Content-Type', 'application/json');
                    }
                });
            }
        });
   }
});

先谢谢你...

Answer 1

this.props.history.push 是这样的原因。

history.push 是用来改变当前位置的