useFetcher data is always undefined or null

[jcjp]

I tried using the useActionData but it always gets undefined I tried searching for the problem and I see a closed discussion about this, that you must use const fetcher = useFetcher(); fetcher.data <-- contains the result however on my side it is always undefined.

My action function is living on the same file / route. What I am trying to do is to submit a react-hook-form with an file uploader child component that will read the contents of the file and that gets return on the action that I need to use on the same route.

export async function({request}) {
 // do my stuff here and there
 return json(something)
}

export default function MyComponent {
 const uploader = useFetcher();
 const submitFn = async () => {
  // do my stuff here and there
  uploader.submit(data, options);
 }

 // on uploader I can see that it successfully captures the data
 // my submit action is also showing 200 status code
 console.log(uploader.data) // <--- undefined first then null

 return  (
   <section>
    // more codes
    <uploader.Form>
       <input {...getInputProps()}> {/* react-hook-form */}
    <uploader.Form>
   </section>
 )
}

What am I missing in the setup? It actually has more components into it.

[kiliman]

Here's a simple example. It's hard to know your intended use case, since you're mixing <fetcher.Form> and also fetcher.submit(data).

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  return json({ success: true, ...Object.fromEntries(formData) });
}
export default function Index() {
  const fetcher = useFetcher<typeof action>();
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
      <h1>Welcome to Remix</h1>
      <fetcher.Form method="post">
        <input type="text" name="name" value="kiliman" />
        <button>Submit</button>
      </fetcher.Form>
      <pre>{JSON.stringify(fetcher.data, null, 2)}</pre>
    </div>
  );
}

⚡️ StackBlitz https://stackblitz.com/edit/remix-run-remix-krqmtg?file=app%2Froutes%2F_index.tsx

[jcjp]

Here's a simple example. It's hard to know your intended use case, since you're mixing <fetcher.Form> and also fetcher.submit(data).

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  return json({ success: true, ...Object.fromEntries(formData) });
}
export default function Index() {
  const fetcher = useFetcher<typeof action>();
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
      <h1>Welcome to Remix</h1>
      <fetcher.Form method="post">
        <input type="text" name="name" value="kiliman" />
        <button>Submit</button>
      </fetcher.Form>
      <pre>{JSON.stringify(fetcher.data, null, 2)}</pre>
    </div>
  );
}

⚡️ StackBlitz https://stackblitz.com/edit/remix-run-remix-krqmtg?file=app%2Froutes%2F_index.tsx

Thanks for your help I think I finally figure my code out, I was able to use native code to do what I need to do. I think it was due to incorrect mix of codes of react-dropzone and Form from Remix.

[pushpanjalip]

I have ParentRoute Wizard.tsx
<Route path="wizard" action={createPostAction} element={<Wizard />} > <Route path="step1" element={<Step1 />} errorElement={<ErrorBoundary />} /> <Route path="step2" element={<Step2 />} errorElement={<ErrorBoundary />} /> <Route path="step3" element={<Step3/>} errorElement={<ErrorBoundary />} /> <Route path="step4" element={<Summary />} errorElement={<ErrorBoundary />} /> </Route>

export async function createPostAction({ request }: { request: Request }) {

const post = await request.json();
const newPost = await createPost(post); // react query mutation
const { postId } = newPost;
queryClient.refetchQueries({ queryKey: ['postsList'], exact: false });
return redirect(/postDetails/${postId});
}

<FormProvider {...formProviderMethods}> <fetcher.Form onSubmit={methods.handleSubmit(handleSubmit)}>

const handleSubmit = useCallback( async (values: FieldValues) => { if (activeStep === steps.length - 1) { try { await handleCreatePost(values); } catch (error) { console.error('Error creating scenario:', error); // Optionally, set an error state to display the error message } } else { handleNext(); } }, [handleNext, handleCreatePost, activeStep, steps.length] );

const handleCreatePost = useCallback( async (values: FieldValues) => { const post = formatData(values); await fetcher.submit(post, { method: 'post', encType: 'application/json', action:/createPost }); }, [fetcher, formatData] );

when error is thrown from action page goes blank with error element shown at the bottom but even if url is /createPost/summary
it does not load summary component.
I am not getting how to use fetcher with react query & forms . any help??