Redirect to list not called after save form

message.txt

11 Replies

Hi @Matt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that your form redirects to the list page after saving, you need to set the redirect property in the useForm hook to "list". By default, the redirect property is set to "list", but if it has been changed or set to false, you will need to explicitly set it back to "list". Here is an example of how you can configure the useForm hook to redirect to the list page after the form is submitted:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import type { HttpError, BaseKey } from "@refinedev/core";

export const Create: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading, redirect },
        register,
        handleSubmit,
        reset,
    } = useForm<IProduct, HttpError, FormValues>({
        refineCoreProps: {
            redirect: "list", // Set redirect to "list"
        }
    });

    const saveAndList = (variables: FormValues) => {
        onFinish(variables).then(() => {
            redirect("list"); // Manually redirect to the list page
        });
    };

    return (
        <form onSubmit={handleSubmit(saveAndList)}>
            {/* form fields */}
            <button type="submit">Save</button>
        </form>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import type { HttpError, BaseKey } from "@refinedev/core";

export const Create: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading, redirect },
        register,
        handleSubmit,
        reset,
    } = useForm<IProduct, HttpError, FormValues>({
        refineCoreProps: {
            redirect: "list", // Set redirect to "list"
        }
    });

    const saveAndList = (variables: FormValues) => {
        onFinish(variables).then(() => {
            redirect("list"); // Manually redirect to the list page
        });
    };

    return (
        <form onSubmit={handleSubmit(saveAndList)}>
            {/* form fields */}
            <button type="submit">Save</button>
        </form>
    );
};

In this example, the redirect property is set to "list" in the useForm hook configuration. Additionally, after the form submission is finished, the redirect("list") function is called to ensure the redirection to the list page. For more details, you can refer to the documentation on the redirect property (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#redirect). If you encounter any issues or need further assistance, feel free to check the GitHub issue (https://github.com/refinedev/refine/issues/2123) where similar problems have been discussed and resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

deep-jade•2mo ago

@kapa.ai using antd it shpould look like this const { saveButtonProps, formProps, queryResult, form } = useForm({ redirect: "list", action:"edit", resource: "skills", id: id2, } );

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that your form redirects to the list page after saving when using Ant Design with refine, you can configure the useForm hook with the redirect property set to "list". Here is how you can do it:

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

import React from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

In this example, the useForm hook is configured with the redirect property set to "list", ensuring that after the form is submitted, the user will be redirected to the list page. For more details, you can refer to the documentation on the redirect property (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#redirect-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

deep-jade•2mo ago

@kapa.ai That all looks right could this be the isssue useEffect(() => { const data = queryResult?.data?.data; if (data) { console.log('Data:', data); // Log the value of data if (!data.params) { data.params = []; } if (!data.body_data) { data.body_data = []; } form.setFieldsValue({ ...data, }); setHeaderCount(data.headers?.length 0); setParamCount(data.params?.length 0); setBodyDataCount(data.body_data?.length || 0); setParams(data.params); } }, [form, queryResult]);

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, the issue could be related to the useEffect hook you are using to set the form values. If the useEffect hook is not properly handling the form state or if it is causing side effects that interfere with the form submission, it could prevent the redirection from happening. Here is a refined version of your useEffect hook to ensure it correctly sets the form values without causing issues:

import React, { useEffect } from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    useEffect(() => {
        const data = queryResult?.data?.data;

        if (data) {
            console.log('Data:', data); // Log the value of data

            // Ensure params and body_data are arrays
            if (!data.params) {
                data.params = [];
            }
            if (!data.body_data) {
                data.body_data = [];
            }

            // Set form fields value
            form.setFieldsValue({
                ...data,
            });

            // Update state if necessary
            setHeaderCount(data.headers?.length || 0);
            setParamCount(data.params?.length || 0);
            setBodyDataCount(data.body_data?.length || 0);
            setParams(data.params);
        }
    }, [form, queryResult]);

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

import React, { useEffect } from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    useEffect(() => {
        const data = queryResult?.data?.data;

        if (data) {
            console.log('Data:', data); // Log the value of data

            // Ensure params and body_data are arrays
            if (!data.params) {
                data.params = [];
            }
            if (!data.body_data) {
                data.body_data = [];
            }

            // Set form fields value
            form.setFieldsValue({
                ...data,
            });

            // Update state if necessary
            setHeaderCount(data.headers?.length || 0);
            setParamCount(data.params?.length || 0);
            setBodyDataCount(data.body_data?.length || 0);
            setParams(data.params);
        }
    }, [form, queryResult]);

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

In this example, the useEffect hook is used to set the form values based on the queryResult. It ensures that params and body_data are arrays before setting the form values. This should help prevent any issues related to form state that might interfere with the redirection. If the issue persists, you might want to check if there are any other side effects or errors in your component that could be preventing the redirection. Additionally, ensure that the saveButtonProps are correctly configured to handle the form submission and redirection. For more details, you can refer to the documentation on the useForm hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#redirect-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

deep-jade•2mo ago

@kapa.ai That looks like my code is now

message.txt

kapa.ai•2mo ago

import React, { useEffect } from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    useEffect(() => {
        const data = queryResult?.data?.data;

        if (data) {
            console.log('Data:', data); // Log the value of data

            // Ensure params and body_data are arrays
            if (!data.params) {
                data.params = [];
            }
            if (!data.body_data) {
                data.body_data = [];
            }

            // Set form fields value
            form.setFieldsValue({
                ...data,
            });

            // Update state if necessary
            setHeaderCount(data.headers?.length || 0);
            setParamCount(data.params?.length || 0);
            setBodyDataCount(data.body_data?.length || 0);
            setParams(data.params);
        }
    }, [form, queryResult]);

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

import React, { useEffect } from "react";
import { useForm } from "@refinedev/antd";
import { Form, Input, Button } from "antd";

const MyFormComponent = ({ id2 }) => {
    const {
        saveButtonProps,
        formProps,
        queryResult,
        form
    } = useForm({
        redirect: "list", // Set redirect to "list"
        action: "edit",
        resource: "skills",
        id: id2,
    });

    useEffect(() => {
        const data = queryResult?.data?.data;

        if (data) {
            console.log('Data:', data); // Log the value of data

            // Ensure params and body_data are arrays
            if (!data.params) {
                data.params = [];
            }
            if (!data.body_data) {
                data.body_data = [];
            }

            // Set form fields value
            form.setFieldsValue({
                ...data,
            });

            // Update state if necessary
            setHeaderCount(data.headers?.length || 0);
            setParamCount(data.params?.length || 0);
            setBodyDataCount(data.body_data?.length || 0);
            setParams(data.params);
        }
    }, [form, queryResult]);

    return (
        <Form {...formProps}>
            <Form.Item label="Skill Name" name="name">
                <Input />
            </Form.Item>
            <Button {...saveButtonProps}>Save</Button>
        </Form>
    );
};

export default MyFormComponent;

kapa.ai•2mo ago

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