Question

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

所以我正在尝试使用材料ui步进器提交注册数据。

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

我使用了材料ui步进器，并说明了要传递给我的道具，如代码链接所示-> https://pastebin.com/uu5j6ADB
我独立创建了两个表单，它们分别在注册过程中从用户收集数据： BusinessRegisterForm （https://pastebin.com/sdFGBfmq）和 UserRegisterForm （{{3} }）中显示。
我在两个表单所在的文件夹中创建了一个 index.js 文件，导入了表单，并将其传递给了实质性的UI步进器组件，如链接所示（{{3 }}）
最后，我创建了一个上下文来管理在两种形式之间传递的数据的状态，即 AuthStepperContext ，如图（https://pastebin.com/GbcmByF2）所示，我将提供者传递给了主根（https://pastebin.com/GM9EcVvy）处的index.js文件

上面解释了我的项目的结构。

问题

在表单步进器的最后一步，我要提交表单中的数据。用户输入所有数据后，我将手柄的Submit函数从props传递到步进器的最后一个按钮。将此代码用于步进（https://pastebin.com/TP7MSJ7Q）

问题来了，我在index.js文件中调用了 AuthStepperContext ，该文件将这两种形式传递给了材质ui stepper。我想从上下文中获取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>
    )
}

当我从上下文中调用handleSubmit函数并将其作为道具传递给步进器时，如图（https://pastebin.com/f5GFKHC8）所示，我收到一条错误 TypeError：Object（...）（...）未定义

我首先认为错误是由于将对象用作初始状态，所以不得不将每个字段替换为其自己的状态。

当用户想要提交表单数据时，是否可以捕获数据并以最后一个表单提交数据？

Answer 1

所以我为可能再次遇到同一问题的任何人找出了问题。问题出在我导入命名模块的方式上。它们应该用大括号包裹起来。

useContext() returns undefined的类似帖子中提供了类似的解决方案

这是我重构代码以将更改应用于步进器之后的代码

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/AuthStepperContext';
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)
    console.log(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>
    )
}

反应TypeError：使用上下文API

1 个答案: