一直在使用 react context api 尝试在material-ui组件之间传递数据。

所以我尝试使用material ui stepper提交注册数据。

我将尝试通过链接到我当前的代码和屏幕截图来复制我想要实现的目标

1. 我使用了material ui stepper并说明了我想要在其中传递的props，如代码链接所示 -> https://pastebin.com/uu5j6ADB

2. 我独立创建了两个表单，用于在注册期间收集用户的数据，即链接中显示的 BusinessRegisterForm ( https://pastebin.com/sdFGBfmq ) 和 UserRegisterForm ( https://pastebin.com/GbcmByF2 )。

3. 我在两个表单所在的文件夹中创建了一个 index.js 文件，导入了表单并传递将它们添加到材料 UI 步进器组件，如链接中所示 ( https://pastebin.com/GM9EcVvy )

4. 最后，我创建了一个上下文，以便能够管理两个表单之间传递的数据的状态，即 AuthStepperContext ，如图所示 ( https://pastebin.com/TP7MSJ7Q ) 我将提供程序传递给根目录下的主 index.js 文件 ( https://pastebin.com/f5GFKHC8 )

以上解释了我的项目是如何结构化。

问题

在表单步进器的最后一步，我想提交来自表单的数据。用户输入所有数据后，我将句柄 Submit 函数从 props 传递给步进器中的最后一个按钮。参考此步进器代码（ https://pastebin.com/uu5j6ADB )

问题出在我调用 index.js 文件中的 AuthStepperContext 时，该文件将两个表单传递给材料 ui 步进器。我想从上下文中获取 handleSubmit 并将其作为道具传递给步进器，并传递给业务注册表单，因为它是用户在提交所有数据之前要填写的最后一张表格。

import React, { useContext, useState } from 'react';
import BusinessRegisterForm from './BusinessRegisterForm';
import UserRegisterForm from './UserRegisterForm';
import HorizontalStepper from '../../controls/HorizontalOptionalStepper';
import Container from '@material-ui/core/Container';
import AuthStepperContext from '../../../Context/AuthContext';
import axios from 'axios'
import { useAuth } from '../../../Context/AuthContext'

export default function RegisterStepper() {
    
    // the issue happens when i introduce this context
    // and try to pass it down to the stepper
    const {handleSubmit} = useContext(AuthStepperContext)

    const getSteps = () => {
        return ['Create Account', 'Add Business'];
    }
    
    const getStepContent = (step) => {
        switch (step) {
            case 0:
            return <UserRegisterForm />;
            case 1:
            return <BusinessRegisterForm />;
            default:
            return 'Unknown step';
        }
    }

    const isStepOptional = (step) => {
        return ;
    }

    const [activeStep, setActiveStep] = useState(0);

    return (
        <Container maxWidth='sm'>
            <HorizontalStepper
                getSteps = {getSteps}
                getStepContent = {getStepContent}
                isStepOptional = {isStepOptional}
                activeStep = {activeStep}
                setActiveStep = {setActiveStep}
                handleSubmit = {handleSubmit}
            />
        </Container>
    )
}

当我从 Context 调用 handleSubmit 函数并将其作为道具传递给 Stepper 时，如图所示（ https://pastebin.com/63HXPJkk ），我收到错误 TypeError：Object(...)(...) 未定义

我首先以为错误是由于使用对象作为初始状态而导致的，并且必须用自己的状态替换每个字段。

当用户想要提交表单数据时，有没有办法捕获数据并在最后一张表单中提交数据？