首页 文章

Redux Form：initialValues不设置表单值

提问于
浏览 次
2

我只想以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;
}

...此时在调试时，“values”具有正确的对象，mapStateToProps正在工作 .

连线：

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

...有或没有“enableReinitialize”结果是一样的 .

我甚至尝试将它传递到这样的形式，但相同的结果 - 表单字段是空白的：

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

1 回答

  • 3

    我相信您的问题是您调用 reduxForm vs connect 的顺序 . 在您当前的代码中，您的连接组件由redux-form包装，这意味着在运行时React树将如下所示

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

    因此，您从 state 中提取的初始值实际上并未传递到连接的表单中 .

    尝试将“有线”代码更改为

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

相关问题