javascript - 如何让forceUpdate()重新渲染我的WIzard表单？

Question

菜鸟问题。我有一个 WizardForm，它有两个提交按钮。它在第三步提交数据，然后在第四步上传照片。照片上传成功后如何重新渲染整个表单？我正在尝试返回表单的干净状态，以便用户可以再次继续输入数据，就像任何正常的数据输入表单一样。

这是我的代码:

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import validate from '../middleware/validate';
import { post } from 'axios';
import {BASE_URL} from '../middleware/api';
import {connect} from "react-redux";
import WizardForm from './WizardForm';

let WizardFormPhoto = (props) => {
const {handleSubmit, pristine, previousPage, submitting} = props;
const onFormSubmit = (data) => {
    const {reset} = this.props;
    let humanID = localStorage.getItem('humanID');
    let token =localStorage.getItem('idToken');
    const AuthStr = 'Bearer '.concat(token);
    let formData = new FormData();
    formData.append('humanId', humanID);
    formData.append('photo', data.profile_pic[0]);

    const config = {
        headers: {'content-type': 'multipart/form-data', 'Authorization' : AuthStr}
    };
    const url = BASE_URL + 'human/upload';

    post(url, formData, config)
        .then(function (response) {
            alert(response.data.message);
            reset();
            WizardForm.forceUpdate();
        }).catch(function (error) {
            console.log(error);
        });
};
return (
    <form onSubmit={handleSubmit(onFormSubmit)} className="form-horizontal">
        <div className="step-3">
            <div className="form-group">
                <label className="col-sm-2 control-label">Add Photo</label>
                <div className="col-sm-10">
                    <Field name="profile_pic" component="input" type="file"/>
                </div>
            </div>
            <div className="clearfix">
                <button type="submit" className="next pull-right btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
);
};


export default reduxForm({
form: 'wizard', //                 <------ same form name
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
})(WizardFormPhoto);

调用 foreceUpdate() 会出现以下错误 WizardForm__.a.forceUpdate is not a function 。我如何让它工作？

P.S:如果重要的话，WizardForm 是父组件。

添加WizardForm

 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from "react-redux";
 import {reduxForm} from 'redux-form';
 import WizardFormFirstPage from './WizardFormFirstPage';
 import WizardFormSecondPage from './WizardFormSecondPage';
 import WizardFormPreview from './WizardFormPreview';
 import WizardFormPhoto from './WizardFormThirdPage'
 import {
isSubmitting,
hasSubmitSucceeded,
hasSubmitFailed
} from 'redux-form'

class WizardForm extends Component {
constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.backToOne = this.backToOne.bind(this);
    this.state = {
        page: 1,
    };
}

nextPage() {
    this.setState({page: this.state.page + 1});
}

previousPage() {
    this.setState({page: this.state.page - 1});
}

backToOne() {
    this.setState({page: 1,})
}

render() {
    const {onSubmit} = this.props;
    const {page, submitSucceeded} = this.state;
    return (
        <div>
            {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage}/>}
            {page === 2 &&
            <WizardFormSecondPage
                previousPage={this.previousPage}
                onSubmit={this.nextPage}
            />}
            {page === 3 &&
            <WizardFormPreview
                previousPage={this.previousPage}
                onSubmit={values => {
                    onSubmit(values, () => {
                        this.setState({
                            submitSucceeded: true
                        });
                        this.nextPage()
                    });
                }}
            />}
            {submitSucceeded && page === 4 &&
            <WizardFormPhoto onSubmit={onSubmit}/>
            }
        </div>
    );
}
}

WizardForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
};

WizardForm = reduxForm({
form: 'wizard',
initialValues: {
    location: {
        latitude: "0.0",
        longitude: "0.0"
    }
    }
})(WizardForm)

WizardForm = connect(
state => ({
    submitting: isSubmitting('wizard')(state),
    submitSucceeded: hasSubmitSucceeded('wizard')(state),
    submitFailed: hasSubmitFailed('wizard')(state)
})
)(WizardForm)

export default WizardForm;

Answer 1

您是否尝试过使用如下所示的 intializeForm 操作创建器？

import { initialize as initializeForm } from 'redux-form';

dispatch(initializeForm('wizard', {}));