Ari*_*deh 4 javascript reactjs redux-form react-redux
我想将初始值(来自react-redux组件的道具)传递给我的redux-form.但是,当我检查传递给的数据时,我没有价值renderField.我在这里跟着职位SO和终极版形式git的论坛,我使用initialValues的mapStateToProps,但它仍然无法正常工作.
这是我的react-redux组件,它包含redux-form:
class ShowGroup extends Component {
render() {
if (this.state.loading) {
return <div>Loading group ....</div>;
}
if (this.state.error) {
return <div>{this.state.error}</div>;
}
let group = this.props.groups[this.groupId];
return (
<div className="show-group">
<form>
<Field
name="name"
fieldType="input"
type="text"
component={renderField}
label="Name"
validate={validateName}
/>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
groups: state.groups,
initialValues: {
name: 'hello'
}
};
}
const mapDispatchToProps = (dispatch) => {
return {
//.....
};
};
export default reduxForm({
form:'ShowGroup'
})(
connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
Run Code Online (Sandbox Code Playgroud)
这是我的renderField代码:
export const renderField = function({ input, fieldType, label, type, meta: { touched, error }}) {
let FieldType = fieldType;
return (
<div>
<label>{label}</label>
<div>
<FieldType {...input} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
}
Run Code Online (Sandbox Code Playgroud)
您正在导出包含错误顺序的包装组件
export default reduxForm({
form:'ShowGroup'
})(
connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
Run Code Online (Sandbox Code Playgroud)
应该
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form:'ShowGroup'
})(ShowGroup);
Run Code Online (Sandbox Code Playgroud)
原因是redux形式HOC需要initialValues自己的道具,如果你颠倒顺序,reduxForm不会得到道具,而是直接传递给组件,组件不知道如何处理它.
| 归档时间: |
|
| 查看次数: |
2035 次 |
| 最近记录: |