创建自定义 Hook 以在 React 中提交表单

Question

在我的项目中，我在提交表单时多次使用相同的逻辑。 每次提交时，我都会显示一个加载程序，然后将其删除并显示错误/成功。

有没有办法制作自定义钩子来避免它？

const [form, setForm] = useForm(initialState);
const [errors, setErrors] = useState({});
const [loading, setLoading] = useState(false);

async function submit() {
  setLoading(true);
  setErrors({});
  const request = await Api.createAccount(form);
  if(request.error) {
    setErrors(request.error.data);
    setLoading(false);
  } else {
    setLoading(false);
    //Do something
  }
}

Answer 1

您可以像这样创建自定义挂钩：

const useSubmit = ({ initialState }) => {
  const [form, setForm] = useForm(initialState);
  const [errors, setErrors] = useState({});
  const [loading, setLoading] = useState(false);
  async function submit({ onSuccess }) {
    setLoading(true);
    setErrors({});
    const request = await Api.createAccount(form);
    if (request.error) {
      setErrors(request.error.data);
    } else {
      //Do something
      onSuccess && onSuccess()
    }
  }
  return { form, setForm, submit, errors, loading };
};

并使用它：

const { form, setForm, submit, errors, loading } = useSubmit({ initialState });

submit({onSuccess: () => {...your code} })