React TypeError: Object(...)(...) is undefined when using Context API

Question

一直在使用反應上下文 api 來嘗試在 material-ui 組件之間傳遞數據。

所以我正在嘗試使用材料 ui 步進器提交注冊數據。

我將嘗試通過指向當前代碼和屏幕截圖的鏈接復制我想要實現的目標

1. 我使用了材料 ui 步進器並聲明了我想要傳遞的道具，如代碼鏈接所示 -> https://pastebin.com/uu5j6ADB

2. 我獨立創建了兩個 forms，它們在注冊期間從用戶那里收集數據，即鏈接中顯示的BusinessRegisterForm ( https://pastebin.com/sdFGBfmq ) 和UserRegisterForm ( https://pastebin.com/GbcmByF2 )。

3. 我在兩個 forms 所在的文件夾中創建了一個index.js文件，導入了 forms 並將它們傳遞給材質 UI 步進器組件，如鏈接中所示 ( https://pastebin.com/GM9EcVvy )

4. 最后，我創建了一個上下文，以便能夠管理兩個 forms 之間傳遞的數據的 state，即AuthStepperContext ，如圖所示（ https://pastebin.com/TP7MSJ7Q ）我將提供者傳遞給根目錄下的主 index.js 文件（ https： //pastebin.com/f5GFKHC8 )

上面解釋了我的項目是如何構建的。

問題

在表單步進器的最后一步，我想提交來自 forms 的數據。在用戶輸入所有數據后，我將句柄 Submit function 從 props 傳遞到步進器中的最后一個按鈕。 為步進器參考此代碼（ https://pastebin.com/uu5j6ADB ）

問題出在我調用 index.js 文件中的AuthStepperContext時，它將兩個 forms 傳遞給材質 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 function 並將其作為道具傳遞給 Stepper 時，如圖所示 ( https://pastebin.com/63HXPJkk )，我收到錯誤TypeError: Object(...)(...)未定義

我首先認為錯誤是由於使用對象作為初始 state 並且不得不用它自己的 state 替換每個字段。

當用戶要提交表單數據時，有沒有辦法在最后一個表單中捕獲數據並提交數據？

Answer 1

所以我為可能再次遇到同樣問題的任何人解決了這個問題。 問題在於我導入命名模塊之一的方式。 它應該用花括號包裹。

在此處的類似帖子中提供了類似的解決方案useContext() returns undefined

這是我重構代碼以將更改應用到步進器后代碼中的一行：

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