Javascript 我不能对redux表单使用initialValue,我应该怎么做?
我想在我的组件中呈现两个redux表单Javascript 我不能对redux表单使用initialValue,我应该怎么做?,javascript,reactjs,redux,redux-form,Javascript,Reactjs,Redux,Redux Form,我想在我的组件中呈现两个redux表单字段 我有一些来自服务器调用的字段的初始值。但是我不能在MapStateTops中使用初始值 为什么??因为我的应用程序状态是一个实体数组,它位于我可以访问this.entityId的组件中,我可以从该数组中选择正确的实体。在MapStateTrops中,我无权访问此 在这种情况下我该怎么办 class ShowGroup extends Component { constructor(props) { super(props); thi
字段
我有一些来自服务器调用的字段的初始值。但是我不能在MapStateTops
中使用初始值
为什么??因为我的应用程序状态是一个实体数组,它位于我可以访问this.entityId
的组件中,我可以从该数组中选择正确的实体。在MapStateTrops
中,我无权访问此
在这种情况下我该怎么办
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));
类ShowGroup扩展组件{
建造师(道具){
超级(道具);
this.groupId=this.props.match.params.id;
此.state={
加载:对,
错误:null
};
}
componentDidMount(){
this.props.fetchGroup(this.groupId,
()=>this.setState({loading:false}),
error=>this.setState({loading:false,error:error})
);
}
render(){
设{props,state}=this;
让group=props.groups[this.groupId];
返回(
);
}
}
函数MapStateTops(状态){
返回{
组:state.groups
};
}
const mapDispatchToProps=(调度)=>{
返回{
fetchGroup:(groupId,successCallback,errorCallback)=>dispatch(fetchGroup(groupId,successCallback,errorCallback))
};
};
导出默认连接(mapStateToProps、mapDispatchToProps)(reduxForm({
验证
enableReinitialize:true,
表格:'ShowGroup'
})(ShowGroup);;
您可以在mapStateToProps
-ownProps
中使用第二个参数
因此,您可以在此函数中访问组件的道具
例如:
function mapStateToProps(state, ownProps) {
const groupId = ownProps.match.params.id;
return {
groups: state.groups,
initialValues: state.groups[groupId],
};
}
希望有帮助。您可以在mapStateToProps
-ownProps
中使用第二个参数
因此,您可以在此函数中访问组件的道具
例如:
function mapStateToProps(state, ownProps) {
const groupId = ownProps.match.params.id;
return {
groups: state.groups,
initialValues: state.groups[groupId],
};
}
希望能有所帮助。使用初始化操作创建者如何?请参见此处,如何使用初始化操作创建者?看这里