我正在开发一个stepper表单。我对解决问题很感兴趣，但也了解我的设计是否正确。我的想法是将每个表单页面 Package 在表单容器中，并循环执行每个步骤。除此之外，我还 Package 了每个表单页面（即）在Formik容器中，以便验证字段。我现在面临的问题是当我切换页面时，我无法通过新的福米克 prop 。

class Form extends Component {

    state = {
        step: 1,
    };

    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        })
    }

    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        })
    }

    render() {
        const {
            step,
        } = this.state;

        switch (step) {
            case 1:
                return (
                    <>
                        <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                            <Stepper
                                steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                                activeStep={0}
                                styleConfig={stepperStyle}
                                className={'stepper'}
                                stepClassName={'stepper__step'}
                            />
                            <Formik
                                initialValues={{
                                    firstName: '',
                                    lastName: '',
                                    gender: '',
                                    DOB: '',
                                    tax_code: '',
                                    zip: '',
                                    district: [{ nome: null, sigla: null, regione: null }],
                                    country: '',
                                    city_birth: ''
                                }}
                                onSubmit={values => {
                                    //alert(JSON.stringify(values, null, 2))
                                    //Axios POST
                                    this.nextStep()
                                }}

                                validationSchema={validationSchemaRegistration}
                            >
                                {(formik) => <LeadRegistration
                                    nextStep={this.nextStep}
                                    prevStep={this.prevStep}
                                    formik={formik}
                                    onSubmit={formik.handleSubmit}
                                />}
                            </Formik>
                        </Paper>
                    </>
                )
            case 2:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={1}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{
                                isItalianCitizen: true,
                                isAddressFiscal: false
                            }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            {(formik) => <LeadPersonalDetails
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                                formik={formik}
                            />}
                        </Formik>
                    </Paper >
                )
            case 3:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={2}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{ example: "example" }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            <LeadPersonalContacts
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                            />
                        </Formik>
                    </Paper>
                )
            case 4:
                return (
                    <Paper variant="outlined" sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
                        <Stepper
                            steps={[{ label: "" }, { label: "" }, { label: "" }, { label: "" }]}
                            activeStep={3}
                            styleConfig={stepperStyle}
                            className={'stepper'}
                            stepClassName={'stepper__step'}
                        />
                        <Formik
                            initialValues={{ example: "example" }}
                            onSubmit={values => {

                            }}
                            validationSchema={
                                ''
                            }>
                            <LeadPersonalStatus
                                nextStep={this.nextStep}
                                prevStep={this.prevStep}
                                handleChange={this.handleChange}
                            />
                        </Formik>
                    </Paper>
                )
            default: return null
        }
    }


}

export default Form;