Click modify in the table, and there is a form in a modal, in the pop-up window. Now there is a problem when you click to modify the value.
parent table
// state
handleEdit = (record: IRoleData) => {
console.log(record)
this.setState({
visible: true,
roleData: record
})
}
// roleData poprs
<ModalForm visible={visible} roleData={roleData} onCancel={this.handleCancel} onOk={this.handleOk}/>
the subcomponent sets the value of form when props is updated
componentWillUpdate(){
this.initForm()
}
/* form*/
initForm() {
if (this.props.roleData) {
console.log(this.props.roleData)
this.props.form.setFieldsValue({...this.props.roleData})
}
}
the problem now is that if I do this, I will report a stack overflow.
my idea is that when you first initialize a subcomponent, because roleData has no value, if you click edit, then roleData will have a value, and then the setting method of form will be called in the life cycle of the change of the props of the subcomponent. It should work. But something went wrong. Please tell me what the reason is.
complement
export default Form.create({
mapPropsToFields: (props: IModalFormProps) => {
if (!props.roleData) {
return
}
return {
name: Form.createFormField(props.roleData.name),
state: Form.createFormField(props.roleData.state),
}
},
onValuesChange: (props, changeValue, allValue) => {
console.log(changeValue)
}
})(ModalFormClass)
it still doesn"t work after using the mapPropsToFieldsz method. Click modify, and you still can"t see the value of the parent component. Displayin form.
all right
name: Form.createFormField({value: props.roleData.name}),
state: Form.createFormField({value: props.roleData.state}),found that the corresponding fields should correspond to value one by one, with embarrassment in uppercase.
