我的Redux向导表单不继承表单值

如何解决我的Redux向导表单不继承表单值

所以我有一个4页的表单，前3个有表单字段，而最后一个只是提交数据后显示的成功页面。

我为quoteReducer中的每个页面上的字段设置了初始值，如下所示：

import {
    QUOTE_SUBMIT,GET_QUOTES,SET_QUOTE_INITIAL_VALUES
} from "../actions/types";

const initialQuoteForm = { 
    your_details: {
        title: "Mr",employment_status: "Employed"
    },your_house: {
        alarm_type: "Standard",two_or_more_smoke_alarms: false,neighbourhood_watch: false,property_type: "Bungalow",cover_type: "Holiday Home",heating_type: "Electric"
    },your_insurance_details: {
        first_time_buyer: false,currently_or_prevIoUsly_insured: false,landlord_or_tennant: "Landlord"
    }   
};

const initialState = { 
    quotes: [],currentQuote: {},quoteInitial: initialQuoteForm,message: "",ok: true,error: []
};

export default function (state = initialState,action) {
    switch (action.type) {
        case GET_QUOTES:
            return {
                ...state,ok: action.payload.ok,message: action.payload.message,errors: action.payload.errors,quotes: action.payload.quotes
            };
        case QUOTE_SUBMIT:
            return {
                ...state,currentQuote: action.payload.quote
            };
        case SET_QUOTE_INITIAL_VALUES:
            return {
                ...state,quoteInitial: action.payload
            };
        default:
            return state;
    }
}

当我在商店中查看表单时，初始值是在表单上设置的。但是，当我移至下一页时，不会保留我最初输入的值（对于没有初始值的字段），并且该页面存储中的唯一值还是初始值。

最后一页上的字段值已保存。每个表单都设置为保留表单数据（第二页示例）

export default reduxForm({
     form: "quote",//Form name is same
     destroyOnUnmount: false,// <------ preserve form data
     forceUnregisterOnUnmount: true // <------ unregister fields on unmount
 })(QuoteFormSecondPage);

有人知道导致表单字段值不被保存的原因吗？

注意，当我删除初始值时，字段值将保留并保留！

编辑：这是我的quoteForm.component，它显示每个页面/表单

<div className="quote-container">
                {page === 1 && (
                    <QuoteFormFirstPage
                        close={this.props.toggleModal}
                        onSubmit={this.nextPage}
                        currentPage={page}
                        initialValues={this.props.initialValues}
                        enableReinitialize={true}
                    />
                )}
                {page === 2 && (
                    <QuoteFormSecondPage
                        close={this.props.toggleModal}
                        prevIoUsPage={this.prevIoUsPage}
                        onSubmit={this.nextPage}
                        currentPage={page}
                        initialValues={this.props.initialValues}
                        enableReinitialize={true}
                    />
                )}
                {page === 3 && (
                    <QuoteFormThirdPage
                        close={this.props.toggleModal}
                        prevIoUsPage={this.prevIoUsPage}
                        toggleAlternateAddress={this.toggleAlternateAddress}
                        onSubmit={this.onSubmit}
                        currentPage={page}
                        showAlternateAddress={this.state.showAlternateAddress}
                        initialValues={this.props.initialValues}
                        enableReinitialize={true}
                    />
                )}
                {page === 4 && (
                    <QuoteFormSuccesspage
                        close={this.props.toggleModal}
                        prevIoUsPage={this.prevIoUsPage}
                        currentPage={page}
                    />
                )}
            </div>

解决方法

已解决，以防将来有人遇到该问题。我正在路过

initialValues={this.props.initialValues}
enableReinitialize={true}

对于每个组件，只需传递一次，即传递给第一个组件。