React Little State Machine 清除数据

Question

带有 react-hook-form 的状态机来制作我的表单，但是提交表单后我想在提交后清除存储；

这就是我创建商店的方式；

createStore({
  data: {}
});

这是我的提交功能

const onSubmit = (data:any) => {
        action(data);
        props.onSubmit(state.data);
        // I need a function to clear the data to not complete my forms after i submit
      }

这是我想要的一个小例子： https://codesandbox.io/s/delete-data-little-state-machine-q3w0g 在“step3”中，我想在点击按钮后清除数据

Answer 1

看来您需要创建另一个操作并将其传递给挂钩。你可以看到这样的例子 in the docs. Here is a working example:

clearAction.js

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

Step3.js

import React from "react";
import { useForm } from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import clearAction from "./clearAction";

const Step3 = (props) => {
  const { register, handleSubmit } = useForm();
  const { state, action } = useStateMachine(clearAction);
  const onSubit = (data) => {
    action(data);
    props.history.push("./resultFinal");
    console.log(state, action);
    action();
  };

  return (
    <form onSubmit={handleSubmit(onSubit)}>
      <h2>Clear Data</h2>
      <input type="submit" />
    </form>
  );
};

export default withRouter(Step3);

请注意，在文档中提供的示例中，您可以根据需要将多个操作传递给挂钩。

React Little State Machine 清除数据

React Little State Machine clear data

reactjs

react-hook-form