Question

我当前正在完成一个MERN系统，并注意到了这个非常奇怪的错误，当我在react页面中单击Submit时，该用户被保存到Mongo db，再过一会儿，另一个用户也被保存了相同的数据。这是我的代码（React前端）

Foo

import React from "react";

 import withStyles from "@material-ui/core/styles/withStyles";
 import InputLabel from "@material-ui/core/InputLabel";
 // core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import Button from "components/CustomButtons/Button.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardAvatar from "components/Card/CardAvatar.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import axios from 'axios';
import avatar from "assets/img/faces/marc.jpg";
import Styles from './Styles'
import { Form, Field } from 'react-final-form'



const styles = {
  cardCategoryWhite: {
     color: "rgba(255,255,255,.62)",
    margin: "0",
     fontSize: "14px",
    marginTop: "0",
    marginBottom: "0"
  },
   cardTitleWhite: {
     color: "#FFFFFF",
     marginTop: "0px",
     minHeight: "auto",
     fontWeight: "300",
     fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
     marginBottom: "3px",
     textDecoration: "none"
   }
 };
 class  UserProfile extends React.Component  {





   onChange = (e) => {
     /*
       Because we named the inputs to match their
       corresponding values in state, it's
       super easy to update the state
     */
     this.setState({ [e.target.name]: e.target.value });
console.log('data', this.state.name)
   }
   onSubmit = async (values , e) => {

 alert('User Created ')

let data = values;

axios.post('/api/users/newuser', {data})
.then(result => console.log(result))
.catch(err => console.log(err))




    }



  state = {
           id: '',
           name: "",
           address:"",
           phonenumber: "",
           isp: "",
           account: "",
           accounttype: "",
           paid:      '',
           staticip:'',
           staticipdate: Date,
           bill: '',
           balance: '',
           username: '',
           pass: '',
           apip: ''

  render(){

   return <div>

导出默认的UserProfile；

正在发生的情况是，该请求在2或3秒钟（没有确切的时间）后被保存在mongodb中，另一个请求被发送，并且文档被保存了2次。这是路线express.js

<h1>Create New User</h1>
<h3>Unlimitik POS system V1.0</h3>


<Form
  onSubmit={this.onSubmit}
  initialValues={{ }}
  render={({ handleSubmit, form, submitting, pristine, values  }) => (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Full Name</label>
        <Field
          name="name"
          component="input"
          type="text"
          placeholder="Full Name"
        />
      </div>
      <div>
        <label>Address</label>
        <Field
          name="address"
          component="input"
          type="text"
          placeholder="address"
        />
      </div>
      <div>
        <label>Phone Number</label>
        <Field
          name="phonenumber"
          component="input"
          type="text"
          placeholder="phonenumber"
        />
      </div>
      <div>
      <label>ISP</label>
        <Field
          name="isp"
          component="input"
          type="text"
          placeholder="isp"
        />
      </div>
      <div>
      <label>Account</label>
        <Field
          name="account"
          component="input"
          type="text"
          placeholder="account"
        />
      </div>
      <div>
      <label>Account Type</label>
        <Field
          name="accounttype"
          component="input"
          type="text"
          placeholder="accounttype"
        />
      </div>
      <div>
      <label>Paid</label>
        <Field
          name="paid"
          component="input"
          type="text"
          placeholder="paid"
        />
      </div>
      <div>
      <label>Static IP</label>
        <Field
          name="staticip"
          component="input"
          type="text"
          placeholder="staticip"
        />
      </div>
      <div>
      <label>Static IP Date</label>
        <Field
          name="staticipdate"
          component="input"
          type="date"
          placeholder="staticipdate"
        />
      </div>
      <div>
      <label>Bill</label>
        <Field
          name="bill"
          component="input"
          type="text"
          placeholder="bill"
        />
      </div>
      <div>
      <label>Balance</label>
        <Field
          name="balance"
          component="input"
          type="text"
          placeholder="balance"
        />
      </div>
      <div>
      <label>username</label>
        <Field
          name="username"
          component="input"
          type="text"
          placeholder="username"
        />
      </div>
      <div>
      <label>pass</label>
        <Field
          name="pass"
          component="input"
          type="text"
          placeholder="pass"
        />
      </div>
      <div>
      <label>AP / IP</label>
        <Field
          name="apip"
          component="input"
          type="text"
          placeholder="AP / IP"
        />
      </div>








      <div>
        <label>Notes</label>
        <Field name="notes" component="textarea" placeholder="Notes" />
      </div>
      <div className="buttons">
        <button type="submit"  disabled={submitting || pristine} >
          Submit
        </button>
        <button
          type="button"
          onClick={form.reset}

        >
          Reset
        </button>
      </div>
      <pre>{JSON.stringify(values, 0, 2)}</pre>
    </form>
       )}
/>

the log after (the ids are different since it is generated on backend not by form)

Answer 1

您似乎有2个onSubmit处理程序。

我建议删除其中之一：

<Form
  // onSubmit={this.onSubmit}  <--- remove this line
  initialValues={{ }}
  render={({ handleSubmit, form, submitting, pristine, values  }) => (
    <form onSubmit={handleSubmit}>

axios重复发布请求

1 个答案: