Récupérer la méthode useFetcher du Router 6 sous la forme

Question

Je n'ai pas d'autre choix que d'appeler la méthode de soumission du getter dans le gestionnaire. Il s'agit d'accéder à la bonne méthode d'action dans le routeur, mais je ne peux pas transmettre cette méthode à l'action, la méthode method='POST 。如何访问处理程序内的fetch.Form définie dans le formulaire ?

const fetcher = useFetcher()

const handlerLogin = useCallback(async () => {
  console.log(fetcher.formMethod) //-> outputting undefined
  fetcher.submit({ value: 'social' }, { method: fetcher.formMethod })
},[])
    
return (
  <Card className={styles.loginCard}>
    <fetcher.Form method='POST' action='/'>
      ..............

Answer 1

Essayez cette solution en passant la méthode à la fonction handlerLogin :

const fetcher = useFetcher();

const handlerLogin = useCallback(async (formMethod) => {
  fetcher.submit({ value: 'social' }, { method: formMethod });
}, []);

return (
  <Card className={styles.loginCard}>
    <fetcher.Form
      method='POST'
      action='/'
    >
      {/* other parts ... */}
      <button onClick={() => handlerLogin(fetcher.formMethod)}>
        Submit
      </button>
    </fetcher.Form>
  </Card>
);