Some pits encountered by react ant in the project

ant form dynamically change form items

form forms cannot be pre-registered e.g.

render(){
    const { visible,onCreate,onCancel, form, title } = this.props;
    let property = null;

    if(!isEmptyObject(this.props.propertys)){
        property = this.props.propertys.propertys.filter((property)=>property.visiable)
            .sort((propertya,propertyb)=> propertya.index-propertyb.index )
            .map((property)=>addFormFactory(property,this.props.form));
    }
    let show = (this.state.tasktype == "Test Task")
        ? <CaseTask {...this.props} testtaskpropertys = {this.props.testtaskpropertys} />
        : property
    const {getFieldDecorator} = form;
    // console.log(this.props);
    return (
        <Modal
            visible={visible}
            title={title}
            okText="Submit"
            cancelText="Cancel"
            onCancel = {onCancel}
            onOk = {onCreate}
            >
            <Form layout="vertical" >
                {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task")
                    ? <FormItem label={"task type"}>
                        {getFieldDecorator("Task Type", {
                            rules: [{ required:false, message: `Please select your !` }],
                        })(
                            <RadioGroup onChange={this.handleClick.bind(this)}>
                                <RadioButton value="Normal task">{"Normal task"}</RadioButton>
                                <RadioButton value="Test Task">{"Test Task"}</RadioButton>
                            </RadioGroup>
                        )}
                    </FormItem>
                    : null
                }
                {/*{property}*/}
                {/*<CaseTask {...this.props} />*/}
                {show}
            </Form>
        </Modal>
    );
}

But transform it like this

render(){
    const { visible,onCreate,onCancel, form, title } = this.props;
    let property = null;

    const {getFieldDecorator,getFieldValue} = form;
    let typeButton = taskType.map((task)=><RadioButton value={task.taskId}>{task.taskName}</RadioButton>)
    return (
        <Modal
            visible={visible}
            title={title}
            okText="Submit"
            cancelText="Cancel"
            onCancel = {onCancel}
            onOk = {onCreate}
        >
            <Form layout="vertical" >
                {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task")
                    ? <FormItem label={"task type"}>
                        {getFieldDecorator("taskType", {
                            rules: [{ required:true, message: `Please select a task type` }],
                        })(
                            <RadioGroup onChange={this.handleClick.bind(this)}>
                                {typeButton}
                            </RadioGroup>
                        )}
                    </FormItem>
                    : null
                }
                {(getFieldValue("taskType")===2)? <CaseTask form={form} testtaskpropertys = {this.props.testtaskpropertys}/>:
                    (!isEmptyObject(this.props.propertys))?this.props.propertys.propertys.filter((property)=>property.visiable)
                    .sort((propertya,propertyb)=> propertya.index-propertyb.index )
                    .map((property)=>addFormFactory(property,this.props.form)):""}
            </Form>
        </Modal>
    );
}

 

The difference is that the first one will register all the form item components, a cache will be generated, all components will be registered on the form, and the form cannot be re-rendered by updating the components, and the second one will leave the component rendering to the end. And according to dynamic judgment, the form item will be continuously re-registered