8 Replies
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:
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:
----------------------<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
optimistic-goldOP•2w ago
@kapa.ai i thought useform in my edit action will call useOne behind the scenes no?
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:
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:
----------------------<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
optimistic-goldOP•2w ago
@kapa.ai u forgot the code with my register() methods in it
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:
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:
----------------------<@343691288442306561> Kapa.ai is still learning and improving, please let me know how I did by reacting below.