在小型状态机中清除存储

Question

我正在使用little-state-machine(https://github.com/bluebill1049/little-state-machine)对于客户端站点上的向导使用react-router，当用户返回向导登录页时，我需要重置存储。我在堆栈溢出(React Little State Machine清除数据(中遵循了这个答案，但我无法使其工作。我无法显示完整的应用程序，但从下面可以看出我所做的有什么错误吗。

App.js

createStore({
data
});
function App() {

return (
<StateMachineProvider>
<DevTool />
<div className="container">
...
<Router>
<Steps />
</Router>
</div>
</StateMachineProvider>
);
}
export default App;

Steps.js

....
import { useStateMachine } from "little-state-machine";
import clearAction from "./lsm/actions/clearAction";
...
export default () => {
....
const location = useLocation();
const { state, actions } = useStateMachine({ clearAction });
...

useEffect(() => {

let step = location.pathname.split("/")[2];
// landing page location = http://site.co.uk/wizard
// steps have url = http://site.co.uk/wizard/step[1-4]
if(!step){

actions.clearAction();

}
}, []);
return (...);
};

clearAction.js

export default function clearAction(state, payload) {
return {};
}

Answer 1

从您共享的代码片段中可以看到，这个Steps组件似乎正在呈现与向导步骤相对应的Route或一组Route。如果我理解您的问题，您希望在步骤为0或某个虚假值时重置向导。

问题是Steps在装载时只运行一次此检查。要解决此问题，您可以将location对象添加为useEffect挂钩的依赖项，以便在location发生任何更改时都会触发挂钩的回调。step条件将检查是否在向导登录页上，并重置状态机。

export default () => {
....
const location = useLocation();
const { state, actions } = useStateMachine({ clearAction });
...

useEffect(() => { 
let step = location.pathname.split("/")[2];
// landing page location = http://site.co.uk/wizard
// steps have url = http://site.co.uk/wizard/step[1-4]
if (!step) {
actions.clearAction();
}
}, [location]); // <-- add location as a dependency
return (...);
};