Question

所以我有一个用reactjs和restapi制作的表格，我要从Confirm页面向其中发送发布请求。主要问题是为什么此表格要提交两次？而且，当我按上一页的下一页时，它正在提交，而不是按确认页面上的“提交”按钮。

import React, { Component } from 'react';
import StepOne from './StepOne';
import SocilaProfiles from './SocialProfiles'
import PersonalDetails from './PersonalDetails';
import Confirm from './Confirm';
import Success from './Success';
import axios from 'axios';

export class UserForm extends Component {
    state = {
        step: 1,
        email: '',
        password: '',
        confirmPassword: '',
        twitter: '',
        facebook: '',
        googlePlus: '',
        firstName: '',
        lastName: '',
        phone: '',
        adress: ''
    }

    // Proceed to next step
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    }

    // Go back to prev step
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        });
    }

    // Handle fields change
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    }

    // MAKING POST REQUEST TO THE API
    formHandler = () => {
        const valuesToSubmit = {
            email: this.state.email,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            twitter: this.state.twitter,
            facebook: this.state.facebook,
            googlePlus: this.state.googlePlus,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            phone: this.state.phone,
            adress: this.state.adress
        }
        console.log('Form:')
        console.log(valuesToSubmit)
        axios.post('http://localhost:9000/api', valuesToSubmit)
            .then(function (response) {
                console.log(response);
                //Perform action based on response
            })
            .catch(function (error) {
                console.log(error);
                //Perform action based on error
            });
    }


    render() {
        const { step } = this.state;
        const { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress } = this.state;
        const values = { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress };

        switch (step) {
            case 1:
                return (
                    <StepOne
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                )
            case 2:
                return (
                    <SocilaProfiles
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                        prevStep={this.prevStep}
                    />
                )
            case 3:
                return (
                    <PersonalDetails
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        prevStep={this.prevStep}
                        values={values}
                    />
                )
            case 4:
                return (
                    <Confirm
                        nextStep={this.nextStep}
                        prevStep={this.prevStep}
                        values={values}
                        handleChange={this.handleChange}
                        formHandler={this.formHandler(this.state.valuesToSubmit)}
                    />
                )
            case 5:
                return <Success />
                
        }
    }
}

export default UserForm;

import React, { Component } from 'react';
import '../index.css';

export class Confirm extends Component {
    continue = e => {
        e.preventDefault();
        // PROCESS FORM -> SEND DATA TO API(EXPRESS)
        this.props.nextStep();
    }

    submit = e => {
        e.preventDefault();
        this.props.formHandler();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render() {
        const { values: { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress }} = this.props;

        return (
            <form onSubmit={this.submit} className="msform">

                <fieldset>
                    <h2 className="fs-title"> Confirm Details </h2>
                    <hr/>
                    <ul className="theList">
                        <li> <strong>Email:</strong> {email} </li>
                        <li> <strong>Twitter:</strong> {twitter} </li>
                        <li> <strong>Facebook:</strong> {facebook} </li>
                        <li> <strong>Google Plus:</strong> {googlePlus} </li>
                        <li> <strong>First Name:</strong> {firstName} </li>
                        <li> <strong>Last Name:</strong> {lastName} </li>
                        <li> <strong>Phone:</strong> {phone} </li>
                        <li> <strong>Adress:</strong> {adress}</li>
                    </ul>
                    <input onClick={this.back} type="button" className="previous action-button" value="Previous" />
                    <input onClick={this.continue} type="button" name="submit" className="submit action-button" value="Submit" />
                </fieldset>
            </form>
        );
    }
}


export default Confirm;

Answer 1

在此方块中...

            case 4:
            return (
                <Confirm
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
                    handleChange={this.handleChange}
                    formHandler={this.formHandler(this.state.valuesToSubmit)}
                />
            )

您正在那里进行函数调用。您只想将函数定义传递给此prop，而不在评估它时调用它。因此，将该行更改为：

formHandler={this.formHandler}

因为formHandler已经在读取this.state来完成其工作，所以无需将状态作为参数传递给那里。

为什么此表格要提交两次

1 个答案: