Antd模态框Modal内部组件数据回显

<Modal
   title="修改菜单"
   visible={isShowEdit}
   onCancel={()=>{
     this.setState({isShowEdit:false})
   }}
   footer={null}
    >
    <EditForm
      menu={menu}
      handleCancel={()=>{
      this.setState({isShowEdit:false})
    }}
   />
</Modal>
           

这里的Modal里面有一个叫EditForm的组件，并给EditForm的组件传入了menu属性。EditForm组件是一个Form表单，那么如何实现在EditForm的组件里面实现数据回显呢？

解决方法：在EditForm组件的componentDidMount阶段和componentDidUpdate阶段做数据回显

formRef = React.createRef(); 
componentDidMount(){
        const {name,title} = this.props.permission
        this.formRef.current.setFields([
            {name:"name",value:name},
            {name:"title",value:title},
        ]);
    }
    componentDidUpdate() {
        const {name,title} = this.props.permission
        this.formRef.current.setFields([
            {name:"name",value:name},
            {name:"title",value:title},
        ]);
    }
    render() {
        const {permission} = this.props
        const formItemLayout = {
            labelCol: { span: 7 }, //左侧label的宽度
            wrapperCol: { span: 15 },//右侧包裹的宽度
        }
        return (
            <Form name="edit_form" 
            onFinish={this.onFinish}
            ref={this.formRef}>
                <Form.Item
                    {...formItemLayout}
                    name="title"
                >
                    <Input ></Input>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="name"
                >
                    <Input></Input>
                </Form.Item>
            </Form>
        )
    }