Javascript 反应：多步骤表单/向导类型错误：操作不是函数

这是我第一次使用React/进行前端开发，我一直在尝试为我的web应用创建多步骤表单/向导。然而，每当我试图提交表单的每一步并推进到下一步时，就会不断抛出一个typeerror。我一定错过了一些非常基本的东西

我的结构如下

我在App.js组件中创建了我的全局存储，并使用statemachineprovider包装了App.js的内容，如下所示

App.js

function Main() {
        return (
            <StateMachineProvider>
            <DevTool/>
            <MemoryRouter>
            <MainNavbar></MainNavbar>
            <div style={{
                height: "100vh",
                backgroundSize: 'contain',
                backgroundPosition: 'top center',
                backgroundRepeat: 'no-repeat',
                backgroundImage: `url("https://www.smartnation.gov.sg/images/default-source/module/home-base-item/cb0c06c1-cfc1-48a9-84ae-7909e93cf716.jpg" )`
            }}>
                <div className="content">
                    <Route exact path="/" component={Home}/>
                    <Route path="/stuff" component={Stuff}/>
                    <Route path="/contact" component={Contact}/>
                    <Route path="/step1" component={Step1}/>
                    <Route path="/step2" component={Step2}/>
                    <Route path="/result" component={Result}/>

                </div>
            </div>
            </MemoryRouter>
            </StateMachineProvider>
                );

}

函数Main（）{
返回(
);
}

我的Contact.js看起来像这样

import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
    Route,
    Link,
    useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";



const Contact = () => {
        const location = useLocation();
        return (
            <>
            <div>
                <nav className="container" aria-label="form-navigation">
                    <ul className="pagination">
                        <li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">Previous</Link></a>
                        </li>
                        <li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">1</Link></a>
                        </li>
                        <li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step2">2</Link></a>
                        </li>
                        <li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/result">3</Link></a>
                        </li>
                        <li className="page-item">
                            <a className="page-link" >Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            </>
        );
}


export default Contact;import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
    Route,
    Link,
    useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";



const Contact = () => {
        const location = useLocation();
        return (
            <>
            <div>
                <nav className="container" aria-label="form-navigation">
                    <ul className="pagination">
                        <li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">Previous</Link></a>
                        </li>
                        <li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step1">1</Link></a>
                        </li>
                        <li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/step2">2</Link></a>
                        </li>
                        <li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
                            <a className="page-link"> <Link to="/result">3</Link></a>
                        </li>
                        <li className="page-item">
                            <a className="page-link" >Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            </>
        );
}


export default Contact;

import React，{Component}来自“React”；
从“react dom”导入react dom；
进口{
记忆器，
路线,，
链接
使用地点
}从“反应路由器dom”；
从“/Step1”导入步骤1；
从“/Step2”导入步骤2；
从“/Result”导入结果；
常量联系人=（）=>{
const location=useLocation（）；
返回(



如果有人能解释一下我的思维错误，我将不胜感激，因为我对状态管理基本上是新手！
这是由于LSM主要版本的更新

您只需更改
useStateMachine
用法

- const { state, action } = useStateMachine(updateAction);
+ const { state, actions } = useStateMachine({ updateAction });

啊，废话。我需要多加注意。一切都好。@CheeJiaYuan