Dapatkan semula kaedah useFetcher Router 6 dalam borang

Question

Saya tiada pilihan selain memanggil kaedah hantar pengambil dalam pengendali. Ia mengakses kaedah tindakan yang betul dalam penghala, tetapi saya tidak boleh menghantar kaedah itu kepada tindakan, kaedah method='POST 。如何访问处理程序内的fetch.Form yang ditakrifkan dalam borang?

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

Cuba penyelesaian ini, hantarkan kaedah kepada fungsi 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>
);