react antd table修改的问题

Question

在表格中点击修改，弹窗一个modal，里面是一个form做修改，现在点击修改传值的时候出问题了。

父组件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}/>
    

子组件 在props更新的时候 对form进行设值

    componentWillUpdate(){
        this.initForm()
    }

    /* 如果有传递数据过来那么就填入form中*/
    initForm() {
        if (this.props.roleData) {
            console.log(this.props.roleData)
            this.props.form.setFieldsValue({...this.props.roleData})
        }
    }

现在问题是如果我这样做的话，会报栈溢出。

我的想法是，刚开始初始化子组件的时候，由于roleData是没有值的，如果点击edit之后，那么roleData就有值了，这个时候子组件 props变化的生命周期中调用form的设值方法。应该生效。但是却出问题了。请教下是什么原因。

补

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)

使用mapPropsToFieldsz这个方法之后还是不行，点击修改，还是看不到父组件的值，在form中显示

可以了

 name: Form.createFormField({value: props.roleData.name}),
 state: Form.createFormField({value: props.roleData.state}),

发现对应的字段要和value一一的对应，大写的尴尬

Answer 1

官方说明

Answer 2

一般溢出都是進入了死循環。

componentWillUpdate() 是當props或者state更新時更會觸發，而你這個initForm()又會再次更新props，又會再次觸發componentWillUpdate()，所以一直下去肯定溢出了。

加個判斷，把要更新的props/state 和當前的props/state比較，不相等才initForm()