我只想在redux-form中设置和呈现表单的初始值。数据在 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;
}
。此时,在调试时,"值"具有正确的对象,并且mapStateToProps正在工作。
连线:
export default reduxForm({
form: "CategoryForm",
enableReinitialize: true
})(connect(mapStateToProps, { saveCategory, getCategories, getCategoriesCount })(CategoryForm));
。无论是否使用"启用重新初始化",结果都是相同的。
我什至尝试像这样将其传递到表单中,但结果相同 - 表单字段为空:
<form onSubmit={handleSubmit(this.onSubmit)} initialValues={initialValues}>
你的问题是你调用reduxForm
与connect
的顺序。在当前的代码中,连接的组件被 redux-form 包装,这意味着在运行时 React 树将看起来像
<ReduxForm>
<ConnectedComponent>
<CategoryForm />
</ConnectedComponent>
</ReduxForm>
正因为如此,您从state
中提取的初始值实际上并没有传递到连接的形式中。
尝试将"有线"代码更改为
export default connect(
mapStateToProps,
{ saveCategory, getCategories, getCategoriesCount }
)(reduxForm({ form: "CategoryForm", enableReinitialize: true })(CategoryForm));