like-gold•3y ago

onfinish callback

onfinish dosent seem to be executed?? const { form, current, gotoStep, stepsProps, formProps, saveButtonProps, queryResult, } = useStepsForm<any>({ autoSave:{ enabled:false, onFinish:(values)=>{ campaignRef.current.getFinalFormData(); return {}; } } }); return ( <Edit isLoading={queryResult?.isFetching} footerButtons={ <> {current > 0 && ( <Button onClick={() => { gotoStep(current - 1); }} > {t("buttons.previousStep")} </Button> )} {current < formList.length - 1 && ( <Button onClick={() => { handleGoToNextStep(); }} > {t("buttons.nextStep")} </Button> )} {current === formList.length - 1 && ( <SaveButton style={{ marginRight: 10 }} {...saveButtonProps} /> )} </> } > {/* <Row gutter={[64, 0]} wrap> */} <Steps {...stepsProps} responsive> <Steps.Step title={t("campaigns.steps.details")} /> <Steps.Step title={t("campaigns.steps.targeting")} /> <Steps.Step title={t("campaigns.steps.ads")} /> </Steps> <CampaignForm ref={campaignRef} formProps={formProps} campaignQueryResult={queryResult} initialValues={{ isActive: true, ...formProps.initialValues, }} current={current} gotoStep={gotoStep} form={form} /> </Edit> );

8 Replies

kapa.ai•3y ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided code, it seems like you're using the useStepsForm hook from refine and you're trying to execute some custom logic when the form is submitted using the onFinish function. The onFinish function is called when the form is submitted. It will call the appropriate mutation based on the action property. You can override the default behavior by passing an onFinish function in the hook's options (source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)). However, in your code, you're passing the onFinish function inside an autoSave object. The autoSave object is not a recognized option for the useStepsForm hook based on the provided extracts. This might be the reason why your onFinish function is not being executed. If you want to execute some custom logic when the form is submitted, you should pass the onFinish function directly to the useStepsForm hook's options, like this:

const {
    form,
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
} = useStepsForm<any>({
    onFinish: (values) => {
        campaignRef.current.getFinalFormData();
        return {};
    },
});

const {
    form,
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
} = useStepsForm<any>({
    onFinish: (values) => {
        campaignRef.current.getFinalFormData();
        return {};
    },
});

Please note that the onFinish function should return a promise that resolves with the data to be sent to the API. If you don't want to send any data to the API, you can return a resolved promise, like this:

onFinish: (values) => {
    campaignRef.current.getFinalFormData();
    return Promise.resolve({});
},

onFinish: (values) => {
    campaignRef.current.getFinalFormData();
    return Promise.resolve({});
},

If you're still having issues, I would recommend checking the official documentation or seeking help from the community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below

like-goldOP•3y ago

@kapa.ai still onFinish not working for below code import { CampaignForm } from "./form"; export const CampaignEdit: React.FC<IResourceComponentsProps> = () => { const t = useTranslate(); const campaignRef = useRef(); const { form, current, gotoStep, stepsProps, formProps, saveButtonProps, queryResult, } = useStepsForm<any>({ onFinish:()=>{ campaignRef.current.getFinalFormData(); return Promise.resolve({}); // return values; } }); const [, setSelectedLocations] = useState<any[]>([]); const formList = [1,2,3]; const handleGoToNextStep = async () => { try { console.log("Field Values:", form.getFieldsValue()); console.log("Field Errors:", form.getFieldsError()); await form.validateFields(); gotoStep(current + 1); // Proceed to the next step if validation is successful } catch (error) { // Handle validation errors if needed console.error("Validation error:", error); } }; return ( <Edit isLoading={queryResult?.isFetching} footerButtons={ <> {current > 0 && ( <Button onClick={() => { gotoStep(current - 1); }} > {t("buttons.previousStep")} </Button> )} {current < formList.length - 1 && ( <Button onClick={() => { handleGoToNextStep(); }} > {t("buttons.nextStep")} </Button> )} {current === formList.length - 1 && ( <SaveButton style={{ marginRight: 10 }} {...saveButtonProps} /> )} </> } > <CampaignForm ref={campaignRef} formProps={formProps} campaignQueryResult={queryResult} initialValues={{ isActive: true, ...formProps.initialValues, }} current={current} gotoStep={gotoStep} form={form} /> </Edit> ); };

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the provided code, it seems like you're using the useStepsForm hook from refine and you're trying to execute some custom logic when the form is submitted using the onFinish function. The onFinish function is called when the form is submitted. It will call the appropriate mutation based on the action property. You can override the default behavior by passing an onFinish function in the hook's options (source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)). However, in your code, you're passing the onFinish function inside an autoSave object. The autoSave object is not a recognized option for the useStepsForm hook based on the provided extracts. This might be the reason why your onFinish function is not being executed. If you want to execute some custom logic when the form is submitted, you should pass the onFinish function directly to the useStepsForm hook's options, like this:

const {{
    form,
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
}} = useStepsForm<any>({{
    onFinish: (values) => {{
        campaignRef.current.getFinalFormData();
        return Promise.resolve({});
    }},
}});

const {{
    form,
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
}} = useStepsForm<any>({{
    onFinish: (values) => {{
        campaignRef.current.getFinalFormData();
        return Promise.resolve({});
    }},
}});

onFinish: (values) => {{
    campaignRef.current.getFinalFormData();
    return Promise.resolve({});
}},

onFinish: (values) => {{
    campaignRef.current.getFinalFormData();
    return Promise.resolve({});
}},

kapa.ai•3y ago

<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below

like-goldOP•3y ago

@kapa.ai how to not load form if an api call fails??

kapa.ai•3y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, you can handle API errors using the HttpError interface. When an API call fails, you can throw an HttpError and catch it in your component to prevent the form from loading. Here's an example of how to implement error handling in your data provider (source (https://refine.dev/docs/api-reference/core/providers/data-provider)):

import { DataProvider, HttpError } from "@refinedev/core";  

export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(`<https://api.example.com/${resource}/${id}`>);  
  
 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  
  
 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

import { DataProvider, HttpError } from "@refinedev/core";  

export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(`<https://api.example.com/${resource}/${id}`>);  
  
 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  
  
 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

In your component, you can use a try/catch block to catch the error and prevent the form from loading. Here's a basic example:

const MyComponent: React.FC = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // Replace this with your actual API call
        await dataProvider.getOne({ resource: 'myResource', id: 'myId' });
        setIsLoading(false);
      } catch (error) {
        setHasError(true);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (hasError) {
    return <div>An error occurred. Please try again later.</div>;
  }

  // Render your form here
  return <MyForm />;
};

const MyComponent: React.FC = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // Replace this with your actual API call
        await dataProvider.getOne({ resource: 'myResource', id: 'myId' });
        setIsLoading(false);
      } catch (error) {
        setHasError(true);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (hasError) {
    return <div>An error occurred. Please try again later.</div>;
  }

  // Render your form here
  return <MyForm />;
};

In this example, the form (MyForm) will not be rendered if an API call fails. Instead, an error message will be displayed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3y ago

<@560876002046377984> kapa.ai is still learning and improving, please let us how it did by reacting below

onfinish callback

Did you find this page helpful?