可以初始化FormSection的值吗？

Question

我正在使用“ FormSections”构建一个表单，并根据用户输入从主体传递道具以形成各个部分。我希望根据传递到form部分的状态值来初始化FormSection字段，但是没有成功。

主要形式 注意：主表单中的字段会按预期初始化

class QueryFormMain extends React.Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidUpdate(prevProps) {
        if (this.props.initialTable !== prevProps.initialTable) {
            this.props.initialize({
                qryTable: this.props.initialTable
            })
        }
    }

    onSubmit = () => {

    }

    render() {

        const { handleSubmit, pristine, reset, submitting } = this.props;

        return (
            <React.Fragment>
                <form onSubmit={handleSubmit(this.onSubmit)} className="page-form">

                    <Field
                        label="Select * From"
                        name="qryTable"
                        component={renderInputField}
                        type="text"
                    />
                    <FormSection name="qryJoin">
                        <QueryFormSectionFirstJoin
                            joinLeftTable={this.props.initialTable}
                            joinLeftField={this.props.currentFieldSelected}
                            joinRightTable={this.props.rightJoinTableSelected}
                            initialize={this.props.initialize} />
                    </FormSection>

                    <div>
                        <button
                            type="submit"
                            className="btn btn-secondary"
                            disabled={pristine || this.state.isLoading}
                        >
                            {this.state.isLoading ? 'Submitting...' : 'Submit'}
                        </button>
                    </div>

                </form>
            </React.Fragment>
        )
    }
}

const mapStateToProps = state => ({
    QueryFormMain: state.form.FacilityInspectionForm
});

QueryFormMain = connect(mapStateToProps)(QueryFormMain);

export default reduxForm({
    form: "QueryFormMain",
    enableReinitialize: true,
    keepDirtyOnReinitialize: true
})(QueryFormMain);

表格部分： 我可以看到这些值已作为props传入，但是这些props并未在表单中初始化。

class QueryFormSectionFirstJoin extends React.Component {

    componentDidUpdate(prevProps) {
        //debugger;
        if (this.props.joinLeftTable !== prevProps.joinLeftTable) {
            this.props.initialize({
                joinLeftField: this.props.joinLeftTable
            })
        }
        if (this.props.rightJoinTableSelected !== prevProps.rightJoinTableSelected) {
            this.props.initialize({ joinRightTable: this.props.rightJoinTableSelected })
        }
    }

    render() {
        const joinTypeFields = ["JOIN", "LEFT OUTER JOIN"]
        return (
            <Row>
                <Col>
                    <Field
                        label="Joint Type"
                        name="joinType"
                        component={renderSelectField}
                    >
                        {joinTypeFields.map(join => (
                            <option key={join} value={join}>{join}</option>
                        ))}
                    </Field>
                </Col>
                <Col>
                    <Field
                        label="Join To"
                        name="joinRightTable"
                        component={renderInputField}
                        type="text"
                    />
                </Col>
                <Col>
                    <Field
                        label="Join On"
                        name="joinLeftField"
                        component={renderInputField}
                        type="text"
                    />
                </Col>
            </Row>
        )
    }
}