search

Home  >  Q&A  >  body text

Retrieve the Router 6 useFetcher method in the form

I have no choice but to call the getter's submit method in the handler. It's accessing the correct action method in the router, but I can't pass that method to the action, which is method='POST defined in the form. How do I access the fetch.Form method inside the handler?

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='/'>
      ..............

P粉993712159P粉993712159445 days ago489

reply all(1)I'll reply

  • P粉739942405

    P粉7399424052023-09-07 13:20:35

    Try this solution, passing the method to the handlerLogin function:

    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>
    );
    

    reply
    0
  • Cancelreply