Question

所以我从redux-form中的示例中获取了一个简单的表单向导。我想用从异步API调用接收的数据初始化字段。

现在的方式是，如果没有向导的每个页面中的vh参数，就不会填充字段，因为在启动服务器请求时初始化已经发生一次。另一方面，如果我向向导页面添加enableReinitialize: true，则在页面之间移动时将丢弃任何用户输入，并且将再次设置initialValues。

我还尝试将enableReinitialize: true选项与keepDirtyOnReinitialize: true一起添加到每个页面，但无济于事。

当您需要通过异步提取的数据初始化字段子集时，创建表单向导的正确方法是什么？这些数据必须由用户覆盖？

WizardForm.jsx：

enableReinitialize: true

WizardFormFirstPage.jsx：

import React, {Component, PropTypes} from 'react'
import WizardFormFirstPage from './WizardFormFirstPage.jsx'
import WizardFormSecondPage from './WizardFormSecondPage.jsx'
import WizardFormThirdPage from './WizardFormThirdPage.jsx'
import fetchData from "./fetchData.jsx";
import {connect} from "react-redux";

class WizardForm extends Component {

constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
        page: 1
    }
}

componentWillMount() {
    if (!this.props.hasFetched)
        this.props.fetchData();
}

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

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

render() {
    const { onSubmit } = this.props;
    const { page } = this.state;
    return (
        <div>
            {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage}     initialValues={this.props.initialValues}/>}
            {page === 2 &&
            <WizardFormSecondPage previousPage={this.previousPage} initialValues={this.props.initialValues}
                                  onSubmit={this.nextPage}/>}
            {page === 3 &&
            <WizardFormThirdPage previousPage={this.previousPage} initialValues={this.props.initialValues}
                                 onSubmit={onSubmit}/>}
            <label>{this.props.isFetching ? "Fetching data.." : "Fetched data successfully." }</label>
        </div>
    )
}
}

function mapStateToProps(state) {
    return {
        initialValues: state.prefill.data,
        isFetching: state.prefill.fetching,
        hasFetched: state.prefill.fetched
    }
}

WizardForm = connect(
    mapStateToProps,
    {fetchData}
)(WizardForm);

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

export default WizardForm;

fetchData.jsx：

class WizardFormFirstPage extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        const {handleSubmit} = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <Field name="firstName" type="text" component={renderField} label="First Name"/>
                <Field name="lastName" type="text" component={renderField} label="Last Name"/>
                <Field name="downPayment" type="text" component={renderField}
                       label="Down Payment" normalize={normalizeDownPayment}/>
                <div>
                    <button type="submit" className="next">Next</button>
                </div>
            </form>
        )
    };
}

WizardFormFirstPage = reduxForm({
    form: "wizard",
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
    //enableReinitialize: true, // <-- !
    validate
})(WizardFormFirstPage);

export default WizardFormFirstPage;

prefill.jsx：

export default function fetchData() {
    return (dispatch) => {
        dispatch({type: "FETCH_DATA_START"});
        axios.get("http://rest.learncode.academy/api/nordischby/customer")
            .then(response => {
                dispatch({type: "FETCH_DATA_FINISH", data: response.data[0]});
            })
            .catch(error => {
                console.error(error);
            });
    }
};

Answer 1

我发现了什么问题。供将来参考：

我现在使用reduxForm()的以下选项：

export default reduxForm({
    form: "wizard",
    destroyOnUnmount: false,
    //forceUnregisterOnUnmount: true, // <-- This bad boy was wrong
    keepDirtyOnReinitialize: true,
    enableReinitialize: true,
    validate
})(WizardFormThirdPage)

初始化redux-form向导

1 个答案: