Redux 表单：initialValues 不设置表单值

Question

我只想在 redux-form 中设置和呈现表单的初始值。数据在 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));

Redux 表单：initialValues 不设置表单值

Redux Form: initialValues does not set form values

reactjs

redux

redux-form