why refresh required to have values bound to form here?

import { useShow, useOne } from "@refinedev/core";
import { Show, NumberField, DateField, Edit } from "@refinedev/mui";
import { Typography, Stack, Box, TextField } from "@mui/material";
import { Form } from "@formio/react";
import { useEffect, useState } from "react";
import { useForm } from "@refinedev/react-hook-form";


export const SubmissionEditAlt = () => {
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
} = useForm();

if (formLoading) {
return <div>loading...</div>;
} else {
return (
<form>
<label>FormId: </label>
<input {...register("formId")} />

<label>forUsers: </label>
<input {...register("forUsers")} />
</form>
);
}
};
import { useShow, useOne } from "@refinedev/core";
import { Show, NumberField, DateField, Edit } from "@refinedev/mui";
import { Typography, Stack, Box, TextField } from "@mui/material";
import { Form } from "@formio/react";
import { useEffect, useState } from "react";
import { useForm } from "@refinedev/react-hook-form";


export const SubmissionEditAlt = () => {
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
} = useForm();

if (formLoading) {
return <div>loading...</div>;
} else {
return (
<form>
<label>FormId: </label>
<input {...register("formId")} />

<label>forUsers: </label>
<input {...register("forUsers")} />
</form>
);
}
};
8 Replies
kapa.ai
kapa.ai2w ago
Hi @flankieflew. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your code, you are using the useForm hook from @refinedev/react-hook-form to manage your form state. This hook provides several methods and properties, including register, which you use to register your input fields. Registering a field is necessary for its value to be included in the form's data object (source (https://refine.dev/blog/react-hook-form/#react-hook-form-how-to-register-a-field)). However, the useForm hook does not automatically fetch or set the initial values for your form fields. This is why you might need to refresh the page to see the values bound to the form. When you refresh the page, the component re-renders, and any side effects (like data fetching) are run again. If you want to fetch data when the component mounts and set these as the initial values of your form, you can use the useEffect hook. Inside the useEffect, you can call a function to fetch your data and then use the setValue method from useForm to set the values of your form fields (source (https://github.com/refinedev/refine/issues/6156)). Here's an example of how you might do this:
useEffect(() => {
// Fetch your data here. This is just a placeholder.
const fetchData = async () => {
const response = await fetch('/api/data');
const data = await response.json();
return data;
};

fetchData().then(data => {
// Use the `setValue` method to set the values of your form fields.
setValue('formId', data.formId);
setValue('forUsers', data.forUsers);
});
}, []);
useEffect(() => {
// Fetch your data here. This is just a placeholder.
const fetchData = async () => {
const response = await fetch('/api/data');
const data = await response.json();
return data;
};

fetchData().then(data => {
// Use the `setValue` method to set the values of your form fields.
setValue('formId', data.formId);
setValue('forUsers', data.forUsers);
});
}, []);
Please replace the fetchData function with your actual data fetching logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2w ago
<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
optimistic-gold
optimistic-goldOP2w ago
@kapa.ai i thought useform in my edit action will call useOne behind the scenes no?
kapa.ai
kapa.ai2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you're correct. When the action is set to "edit" in useForm, it does call useOne behind the scenes to fetch the record to be edited. The id for the record is obtained from the props or the current route (source (https://refine.dev/docs/data/hooks/use-form/#edit)). The fetched data is then set as the query property, which you can use to populate your form fields (source (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#query)). Here's an example of how you might do this:
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
} = useForm({ action: "edit" });

useEffect(() => {
if (query.data) {
setValue('formId', query.data.formId);
setValue('forUsers', query.data.forUsers);
}
}, [query.data]);
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
} = useForm({ action: "edit" });

useEffect(() => {
if (query.data) {
setValue('formId', query.data.formId);
setValue('forUsers', query.data.forUsers);
}
}, [query.data]);
In this example, useEffect is used to set the form values whenever query.data changes. Please replace 'formId' and 'forUsers' with your actual field names. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2w ago
<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
optimistic-gold
optimistic-goldOP2w ago
@kapa.ai u forgot the code with my register() methods in it
kapa.ai
kapa.ai2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the oversight. Here's how you can use the register method from useForm to bind the fetched data to your form fields:
import { useForm } from "@refinedev/react-hook-form";
import { useEffect } from "react";

export const SubmissionEditAlt = () => {
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
setValue
} = useForm({ action: "edit" });

useEffect(() => {
if (query.data) {
setValue('formId', query.data.formId);
setValue('forUsers', query.data.forUsers);
}
}, [query.data]);

if (formLoading) {
return <div>loading...</div>;
} else {
return (
<form>
<label>FormId: </label>
<input {...register("formId")} />

<label>forUsers: </label>
<input {...register("forUsers")} />
</form>
);
}
};
import { useForm } from "@refinedev/react-hook-form";
import { useEffect } from "react";

export const SubmissionEditAlt = () => {
const {
saveButtonProps,
refineCore: { query, formLoading },
register,
control,
formState: { errors },
setValue
} = useForm({ action: "edit" });

useEffect(() => {
if (query.data) {
setValue('formId', query.data.formId);
setValue('forUsers', query.data.forUsers);
}
}, [query.data]);

if (formLoading) {
return <div>loading...</div>;
} else {
return (
<form>
<label>FormId: </label>
<input {...register("formId")} />

<label>forUsers: </label>
<input {...register("forUsers")} />
</form>
);
}
};
In this code, register is used to register the form fields, and setValue is used inside a useEffect hook to set the initial values of the form fields when the query.data changes. Please replace 'formId' and 'forUsers' with your actual field names. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2w ago
<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.