我不能将 initialValues 用于 redux-form,我该怎么办?
I cannot use initialValues for redux-form, what should I do?
我想在我的组件中呈现两个 redux 表单 Fields
。
我有一些来自服务器调用的字段的初始值。但是我不能在 mapStateToProps
中使用 initialValues
。
为什么?因为我的应用程序状态是一个实体数组,它位于我可以访问 this.entityId
的组件中,这让我可以从该数组中选择正确的实体。在 mapStateToProps
我无法访问 this
遇到这种情况怎么办?
class ShowGroup extends Component {
constructor(props) {
super(props);
this.groupId = this.props.match.params.id;
this.state = {
loading: true,
error: null
};
}
componentDidMount() {
this.props.fetchGroup(this.groupId,
() => this.setState({loading: false}),
error => this.setState({loading:false, error: error})
);
}
render() {
let {props, state} = this;
let group = props.groups[this.groupId];
return (
<div className="show-group">
<form>
<Field
name="name"
fieldType="input"
type="text"
component={renderField}
label="Name"
validate={validateName}
/>
<Field
name="description"
fieldType="textarea"
component={renderField}
label="Name"
rows="2"
validate={validateName}
onBlur={this._updateGroupDesc}
/>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
groups: state.groups
};
}
const mapDispatchToProps = (dispatch) => {
return {
fetchGroup: (groupId, successCallback, errorCallback) => dispatch(fetchGroup(groupId, successCallback, errorCallback))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
validate,
enableReinitialize: true,
form:'ShowGroup'
})(ShowGroup));
您可以在 mapStateToProps
- ownProps
.
中使用第二个参数
所以你可以在这个函数中访问你的组件的道具。
例如:
function mapStateToProps(state, ownProps) {
const groupId = ownProps.match.params.id;
return {
groups: state.groups,
initialValues: state.groups[groupId],
};
}
希望对您有所帮助。
我想在我的组件中呈现两个 redux 表单 Fields
。
我有一些来自服务器调用的字段的初始值。但是我不能在 mapStateToProps
中使用 initialValues
。
为什么?因为我的应用程序状态是一个实体数组,它位于我可以访问 this.entityId
的组件中,这让我可以从该数组中选择正确的实体。在 mapStateToProps
我无法访问 this
遇到这种情况怎么办?
class ShowGroup extends Component {
constructor(props) {
super(props);
this.groupId = this.props.match.params.id;
this.state = {
loading: true,
error: null
};
}
componentDidMount() {
this.props.fetchGroup(this.groupId,
() => this.setState({loading: false}),
error => this.setState({loading:false, error: error})
);
}
render() {
let {props, state} = this;
let group = props.groups[this.groupId];
return (
<div className="show-group">
<form>
<Field
name="name"
fieldType="input"
type="text"
component={renderField}
label="Name"
validate={validateName}
/>
<Field
name="description"
fieldType="textarea"
component={renderField}
label="Name"
rows="2"
validate={validateName}
onBlur={this._updateGroupDesc}
/>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
groups: state.groups
};
}
const mapDispatchToProps = (dispatch) => {
return {
fetchGroup: (groupId, successCallback, errorCallback) => dispatch(fetchGroup(groupId, successCallback, errorCallback))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
validate,
enableReinitialize: true,
form:'ShowGroup'
})(ShowGroup));
您可以在 mapStateToProps
- ownProps
.
所以你可以在这个函数中访问你的组件的道具。
例如:
function mapStateToProps(state, ownProps) {
const groupId = ownProps.match.params.id;
return {
groups: state.groups,
initialValues: state.groups[groupId],
};
}
希望对您有所帮助。