React: Multi step form/wizard TypeError: action is not a function

Question

这是我第一次使用 React/doing 一般的前端开发，我一直在尝试为我的网络应用程序创建一个多步骤 form/wizard。我参考了 this react hook form tutorial on making a multi step form with validation，但是，每当我尝试提交表单的每个步骤并推送到下一步时，都会不断抛出类型错误。我一定是遗漏了一些非常基本的东西。

我的结构如下

我在 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>
                );

}

我的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;

其余代码（Step1、Step2、updateAction 等）与上述教程中使用的代码完全相同。也可以在这里找到 in codesandbox.

如果有人能解释我的错误想法，我将不胜感激，因为我对一般的状态管理真的很陌生！

Answer 1

这是由于 LSM 主要版本更新。 https://github.com/bluebill1049/little-state-machine/releases/tag/v4.0.0-rc.2

您只需更改 useStateMachine 用法。

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

React: Multi step form/wizard TypeError: action is not a function

React: Multi step form/wizard TypeError: action is not a function

javascript

reactjs

react-router

react-hook-form

react-state-management