reactjs - Redux表格: initialValues does not set form values

Question

我只想以 redux 形式设置并渲染表单的初始值。数据位于 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}>

Answer 1

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

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

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

尝试将“Wired up”代码更改为

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