Redux Form:initialValues不设置表单值

时间:2018-01-10 21:59:35

标签: reactjs redux redux-form

我只想以redux-form设置和呈现表单的initialValues。数据是在redux中,我相信我正确映射...但表单没有填充。该表单适用于插入,但现在我将其连接起来进行更新。

Redux表格7.2.0

形式:

...
<div className="form-group">
    <div className="col-md-2 control-label">Name</div>
    <div className="col-md-10">
        <Field 
            label="Name"
            name="app_cat_name" 
            component={input}
            validate={required} />
    </div>
</div>
<div className="form-group">
    <div className="col-md-2 control-label">Description</div>
    <div className="col-md-10">
        <Field 
            label="Description"
            name="app_cat_descr" 
            component={textArea}
            validate={required} />
    </div>
</div>
...

mapStateToProps:

const mapStateToProps = state => {
    let values = { 
        initialValues: state.category
    };
    return values;
}

......此时正在调试,&#34;值&#34;有正确的对象,mapStateToProps正在工作。

有线:

export default reduxForm({
    form: "CategoryForm",
    enableReinitialize: true
})(connect(mapStateToProps, { saveCategory, getCategories, getCategoriesCount })(CategoryForm));

...有或没有&#34; enableReinitialize&#34;结果是一样的。

我甚至尝试将其传递到这样的形式,但结果相同 - 表单字段为空白:

<form onSubmit={handleSubmit(this.onSubmit)} initialValues={initialValues}>

1 个答案:

答案 0 :(得分:3)

我认为您的问题是您致电reduxForm vs connect的顺序。在您当前的代码中,您的连接组件被redux-form包装,这意味着在运行时React树看起来像

<ReduxForm>
    <ConnectedComponent>
        <CategoryForm />
    </ConnectedComponent>
</ReduxForm>

正因为如此,您从state中提取的初始值实际上并未传递到连接的表单中。

尝试更改您的'#34; Wired up&#34;代码

export default connect(
    mapStateToProps,
    { saveCategory, getCategories, getCategoriesCount }
)(reduxForm({ form: "CategoryForm", enableReinitialize: true })(CategoryForm));