提交表單時如何防止在收到服務器端的響應后刷新響應

Question

我遇到了 reactjs 和 nodejs 的問題，我想上傳圖片，同時將用戶輸入保存到數據庫中。 我能夠完成所有這些但問題是如果我完全填寫表單並點擊提交按鈕數據將成功提交但反應頁面正在刷新並且我用戶e.preventDefault()和e.stopPropagation() function 仍然是相同的事情和我也包裝了我的___handleSubmit()但onClick={ (e) => { this.___handleSubmit(e)}}和所有仍然相同的東西。

反應代碼

  __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用於改變當前位置