Javascript React-TypeError:使用上下文API时未定义对象（…）（…）

正在使用react上下文api尝试在材质ui组件之间传递数据

所以我尝试使用MaterialUI stepper提交注册数据

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

我使用了material ui stepper，并说明了我希望传递给它的道具，如代码链接->

我独立创建了两个表单，它们在注册期间从用户收集数据，即链接中显示的BusinessRegisterPerform（）和UserRegisterPerform（）

我在两个表单所在的文件夹中创建了一个index.js文件，导入表单并将其传递给material UI stepper组件，如链接（）所示

最后，我创建了一个上下文，以便能够管理两个表单之间传递的数据的状态，即authspercontext，如图所示（）我将提供程序传递到根（）处的主index.js文件

上面解释了我的项目是如何组织的

问题

在表单步进器的最后一步，我想提交表单中的数据。用户输入所有数据后，我将handle Submit函数从props传递到stepper中的最后一个按钮。请参考步进器（）的此代码

问题在于，我在index.js文件中调用了AuthStepperContext，将这两个表单传递给material ui stepper。我想从上下文中获取handleSubmit，并将其作为道具传递给stepper，也传递给Business register表单，作为提交所有数据之前用户要填写的最后一个表单

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>
    )
}

import React，{useContext，useState}来自“React”；
从“/BusinessRegisterPerform”导入BusinessRegisterPerform；
从“/UserRegisterForm”导入UserRegisterForm；
从“../../controls/HorizontalOptionalStepper”导入水平步进器；
从“@material ui/core/Container”导入容器；
从“../../../Context/AuthContext”导入AuthStepperContext；
从“axios”导入axios
从“../../../Context/AuthContext”导入{useAuth}
导出默认函数寄存器Stepper（）{
//当我介绍这个上下文时，问题就出现了
//试着把它传给步进机
const{handleSubmit}=useContext（AuthStepperContext）
常量getSteps=（）=>{
返回['Create Account'，'Add Business']；
}
const getStepContent=（步骤）=>{
开关（步骤）{
案例0：
返回；
案例1：
返回；
违约：
返回“未知步骤”；
}
}
常量isStepOptional=（步骤）=>{
返回；
}
常量[activeStep，setActiveStep]=useState（0）；
返回(
)
}

当我从上下文调用handleSubmit函数并将其作为道具传递给Stepper时，如图（）所示，我得到一个错误TypeError:Object（…）（…）未定义

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

---

当用户想要提交表单数据时，有没有一种方法可以捕获数据并在最后一个表单中提交数据？

因此我为可能再次遇到相同问题的任何人解决了这个问题。 问题在于我导入一个命名模块的方式。它应该用花括号包起来

类似的解决方案也在这里的类似帖子中提供

以下是我重构代码以将更改应用于步进器后代码中的行：

import {AuthStepperContext} from '../../../Context/AuthStepperContext';