React:多步骤表单/向导TypeError: action不是函数

Question

这是我第一次使用React/做前端开发一般，我已经卡住了试图创建一个多步骤的表单/向导为我的web应用程序。我参考了这个React钩表单教程制作多步骤表单与验证，然而，一个类型错误已经不断抛出每当我试图提交表单的每一步，并推动到下一步。我一定错过了一些非常基本的东西。

我的结构如下:

我在App.js组件中创建了我的全局存储，并用一个状态机提供程序包装了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>
);
}

我的<<p> strong> 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等)与教程中提到的代码完全相同。也可以在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 });