反应。如何在登录完成后填充表单

Question

我有两个react组件(SignupDetails.js和BasicInformation.js)。SignupDetails显然负责注册用户，它将从表单中获取用户信息，并通过axios将其提交给服务器。

在服务器端(后端)，如果用户已经存在，服务器将收集剩余的信息，如名字、中间名等，然后将其发送回客户端进行收集。

返回到客户端，现在已返回的剩余用户信息将使用redux-reducers存储在中央存储中，然后页面被“重定向”到BasicInformation.js

现在在BasicInformation.js上，然后执行mapStateToPros，所以我可以访问存储在中央存储上的信息，但接下来就成了问题:我很难显示剩余的信息。这听起来很简单，但是我在componentDidUpdate和render方法上尝试了很多方法，但都没有成功。

请找到下面的代码，让我知道如果你有任何想法。

​

import React, {Component} from 'react';
import classes from './SignUp.module.css';
import {connect} from 'react-redux'
import * as actions from '../../store/actions/index';
import Spinner from '../../components/UI/Spinner/Spinner'

class SignupDetails extends Component {

    constructor(props) {
        super(props)
        this.state = {
            email: '',
            password: ''
        };

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    postDataHandler = () => {
        const data = {
            username: this.state.email,
            email: this.state.email,
            password: this.state.password
        };
        this.props.onSignupDetails(data);
    }

    componentDidMount() {
        this.props.history.push({pathname: '/signup_details/'})
    }

    componentDidUpdate() {
        if (this.props.signup_details_success)
            this.props.history.push({pathname: '/basic_information/'})
    }

    render() {
        let errorMessage = null;
        if (this.props.error) {
            errorMessage = (
                <p>{this.props.signup_details_response}</p>
            );
        }

        return (
            <div>
                <Spinner show={this.props.loading}/>
                <div className={classes.SignUpForm}>
                    {errorMessage}
                    <h3>Take your first step.</h3>

                    <div>
                        <input
                            key="email"
                            name="email"
                            value={this.state.email}
                            onChange={this.handleInputChange}/>
                    </div>

                    <div>
                        <input
                            key="password"
                            name="password"
                            value={this.state.password}
                            onChange={this.handleInputChange}/>
                    </div>

                    <button className={classes.OkButton} onClick={this.postDataHandler}>Next</button>
                </div>
            </div>

        );
    }
}

const mapStateToProps = state => {
    return {
        signup_details: state.signup.signup_details,
        signup_details_success: state.signup.signup_details_success,
        signup_details_response: state.signup.signup_details_response,
        loading: state.signup.loading,
        error: state.signup.error
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onSignupDetails: (signup_details) => dispatch(actions.signupDetails(signup_details))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(SignupDetails);



-----



import React, {Component} from 'react';
import classes from './SignUp.module.css';
import {connect} from 'react-redux'
import * as actions from '../../store/actions/index';
import Spinner from '../../components/UI/Spinner/Spinner'

class BasicInformation extends Component {

    constructor(props) {
        super(props)
        this.state = {
            first_name: '',
            middle_name: '',
            last_name: '',
            mobile_number: '',
            fund_balance: ''
        }
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    postDataHandler = () => {
        const data = {
            username: this.state.email,
            email: this.state.email,
            first_name: this.state.first_name,
            middle_name: this.state.middle_name,
            last_name: this.state.last_name,
            mobile_number: this.state.mobile_number,
            sfunds: [{balance: this.state.fund_balance}]
        };

        this.props.onSignupBasicInformation(data);
    }

    componentDidUpdate() {
        if (this.props.signup_basic_information_success)
            this.props.history.push({pathname: '/personal_information/'})
    }

    render() {
        let errorMessage = null;
        if (this.props.error) {
            errorMessage = (
                <p>{this.props.signup_basic_information_response}</p>
            );
        }

        return (
            <div>
                <Spinner show={this.props.loading}/>
                <div className={classes.SignUpForm}>
                    {errorMessage}
                    <h3>First we need some basic information</h3>

                    <div><input
                        key="first_name"
                        name="first_name"
                        value={this.state.first_name}
                        onChange={this.handleInputChange}/></div>
                    <div><input
                        key="middle_name"
                        name="middle_name"
                        value={this.state.middle_name}
                        onChange={this.handleInputChange}/></div>
                    <div><input
                        key="last_name"
                        name="last_name"
                        value={this.state.last_name}
                        onChange={this.handleInputChange}/></div>
                    <div><input
                        key="mobile_number"
                        name="mobile_number"
                        value={this.state.mobile_number}
                        onChange={this.handleInputChange}/></div>
                    <div><input
                        key="fund_balance"
                        name="fund_balance"
                        value={this.state.fund_balance}
                        onChange={this.handleInputChange}/></div>

                    <button className={classes.OkButton} onClick={this.postDataHandler}>Next</button>
                </div>
            </div>

        );
    }
}

const mapStateToProps = state => {
    return {
        signup_details_success: state.signup.signup_details_success,
        signup_details_response: state.signup.signup_details_response,

        signup_basic_information: state.signup.signup_basic_information,
        signup_basic_information_success: state.signup.signup_basic_information_success,
        signup_basic_information_response: state.signup.signup_basic_information_response,

        loading: state.signup.loading,
        error: state.signup.error
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onSignupBasicInformation: (basic_information) => dispatch(actions.signupBasicInformation(basic_information))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(BasicInformation);

​

Answer 1

如果有人想知道，我设法通过componentDidMount来设置本地状态来解决这个问题。

componentDidMount(){
    if(this.props.smsf_member_details) {
        this.setState({
            first_name: this.props.smsf_member_details.first_name,
            last_name: this.props.smsf_member_details.last_name,
            middle_name: this.props.smsf_member_details.middle_name,
        });
    }
}