当我单击提交按钮时，它不会存储到数据库中，但它会不断重定向回表单页面

Question

我使用 Reactjs 和 Material UI，然后使用 Formik 进行表单验证。每当我完成表单然后点击提交按钮时，它看起来好像正在请求将数据发布到后端，但随后它重新加载回同一个表单页面。

        const initialValues = {
          from: "",
          to: "",
          purpose: "",
          date: "",
          kilometer: "",
          amount: "",
          claimType: "",
          fullname:"",
          vehicleNo: "",
          bank: "",
          email: "",
          department: "",
          status:"",
        };
        useEffect(() => {
          if(!localStorage.getItem("accessToken")){
            history.push("/");
          }
        }, [])
        const validationSchema = Yup.object().shape({
          from: Yup.string().required(),
          to: Yup.string().required() ,
          purpose:Yup.string().required(),
          date:Yup.date().required(),
          kilometer:Yup.number().required(),
          amount: Yup.number().required(),
          claimType: Yup.string().required(),
          fullname: Yup.string().required(),
          vehicleNo: Yup.string().required(),
          department: Yup.string().required(),
          bank: Yup.string().required(),    
          email: Yup.string().email(),
          status: Yup.string(),
    
    
        });
    
        const onSubmit = (data)=> {
          axios
          .post("http://localhost:5001/dutyMileage",  data, {
            headers: 
            { accessToken: localStorage.getItem("accessToken")},
          })
          .then((response) => {
              console.log("it worked");
              history.push('/Home');
              
          })
        }
     

return ( 
<div>

    <Formik 
    initialValues={initialValues}
    onSubmit={onSubmit}
    validationSchema={validationSchema} >

    <form className={classes.root}  onSubmit={() => { alert("Claim Submitted"); }}>
       <div className="formstep1">
         <div>
        <TextField 
        label="Full Name"
         required
        autoComplete="off"
        variant="outlined"
        name="fullname"  
        placeholder="Enter your Full name"
        />
    

    <TextField 
                    label="Department"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="department" 
                    placeholder="Enter your department"
                    />
                    </div>
    
                    <div>
                    <TextField 
                    label="Bank"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="bank" 
                    placeholder="Enter your bank name"
                    />
                   <TextField
                    label="Date"
                    name="date"
                    variant="outlined"
                  />
                    </div>
    
                    <div>
           
                   <TextField 
                     disabled
                    variant="outlined"
                    label="status"
                    name="status"
                    value="PENDING"
                    />
    
                  <TextField 
                    label="Email"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="email" 
                    placeholder="Enter your Email "
                    />
                    </div>
                    <div className="select">
                    <InputLabel id="demo-simple-select-outlined-label">Claim Type</InputLabel>
            <Select
             required
             name="claimType"
              variant="outlined"
              label="Claim Type"
              value={claimType}
              onChange={handleChange}
            >
              <MenuItem value="Duty Mileage">Duty Mileage</MenuItem>
              <MenuItem value="Travelling Allowances">Travelling Allowances</MenuItem>
              <MenuItem value="Approved Purchases">Approved Purchases</MenuItem>
              <MenuItem value="Guest Of University">Guest Of University </MenuItem>
              <MenuItem value="Other Claims">Other Claims</MenuItem>
              
            </Select>
                    </div>
                    <div>
    
                    <TextField
              label="Kilometer"
              name="kilometer"
              className={classes.root, classes.textField}
              InputProps={{
                endAdornment: <InputAdornment position="end">Km</InputAdornment>,
              }}
              variant="outlined"
              onChange={ (event) => {
                setKilometer(event.target.value);
              }}
              placeholder="Number of Kilometers"
            />
             <TextField
            label="Amount"
            onChange={handleChangee}
            name="amount"
            InputProps={{
              inputComponent: NumberFormatCustom,
            }}
            variant="outlined"
            placeholder="Enter Amount In Naira"
          />
          </div>
    
          <div>
                    <TextField 
                    label="From"
                     required
                    autoComplete="off"
                    variant="outlined"
                    placeholder="Journey From"
                    name="from" />
    
                    <TextField 
                    label="To"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="to" 
                    placeholder="journey To"
                    />
                    </div>
                    <div>
                    <TextField 
                    label="Vehicle Number"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="vehicleNo" 
                    placeholder="Enter your Vehicle Number"
                    />
                    <TextField 
                    label="Purpose"
                     required
                    autoComplete="off"
                    variant="outlined"
                    name="purpose" 
                    placeholder="purpose"
                    />
                    </div>
                    </div>
                    <button type="submit"> Submit Claim</button>
                </form>
                </Formik>
                
                  </Paper>
        </div> 
    
        
            ); 
        }   
    

后端是这样的

路由器请求：

const express = require("express");
const router = express.Router();
const { DutyMileage } = require("../models");
const { validateToken } = require("../middlewares/AuthMiddleware");


router.post("/", validateToken, async(req, res) => {
    const post = req.body;
    post.userId = req.username.userId;
    post.StaffId = req.username.id;
   await DutyMileage.create(post);
   res.json(post);
    
});

每当我请求将数据提交到数据库时，它都会不断重新加载并卡在表单页面上。

Answer 1

首先，您必须在控制台中出现错误，检查浏览器中的检查以及您的节点（npm 控制台）错误

其次，这里是来自formik官方库的代码，尝试重新制作你的模板进行测试：

<Formik
        initialValues={{yourInitialValues}}
        validationSchema={yourYupValidation}
        onSubmit={(values, {setSubmitting, resetForm}) => {
            // When button submits form and form is in the process of submitting, submit button is disabled
            setSubmitting(true);
            // Simulate submitting to database, shows us values submitted, resets form
            setTimeout(() => {

                //your code to send to API
                //you can debug and test values here
                alert(JSON.stringify(values, null, 2))
                setSubmitting(false);
            }, 1);
        }}
      >
{( {values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleReset,
    setFieldValue, 
    handleSubmit,
    setFieldTouched,
    isSubmitting }) => (
    //use only formik functions to test
    <form onSubmit={handleSubmit}>
    
    </form>

)}
</Formik>

最后一个：你有onSubmit={() => { alert("Claim Submitted"); }}，检查这一行，你只是控制台日志onSubmit。此外，您的 onSubmit const 在 Formik 组件之外，它可能会影响 formik 行为。