custom edit page
Hello, I'm trying to create a edit page from a different path than the standard, trying to adapt my useForm parameters.
My code looks like this:
export const UpdatePasswordPage: React.FC = () => {
const t = useTranslate();
const {
saveButtonProps,
handleSubmit,
refineCore: { queryResult, onFinish, formLoading },
register,
control,
formState: { errors },
} = useForm({
action: "edit",
resource: "users",
id : 5,
});
const UsersData = queryResult?.data?.data;
console.log( UsersData );
I cannot get the UsersData populated, and also the onFinish function does nothing (no save, no calls on the API). What am I doing wrong ?
5 Replies
Hi @dannywhiteagile. 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 information provided in the extracts, it seems like you're on the right track with using
useForm
for the edit
action. However, there are a few things you might want to check:
1. Check your dataProvider
methods: The useForm
hook uses the update
and getOne
methods from the dataProvider
when the action
is edit
. Make sure these methods are implemented correctly in your dataProvider
and they are able to fetch and update the data as expected. source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)
2. Check your id
: The id
you're passing to useForm
is used to determine the record to edit. Make sure the id
you're passing (in this case, 5
) corresponds to an existing record in your users
resource. source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)
3. Check your onFinish
function: The onFinish
function is called when the form is submitted. If it's not doing anything, it might be because it's not implemented correctly or not being called at all. Make sure you're calling handleSubmit(onFinish)
when the form is submitted. source (https://refine.dev/docs/packages/documentation/react-hook-form/useForm)
4. Check your route: By default, useForm
determines the action
from the route. If you're using a custom route, you might need to pass the action
prop to useForm
to override this behavior. source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)
If you've checked all these and you're still having issues, it might be helpful to look at the examples provided in the documentation for using useForm
with action: "edit"
. source (https://refine.dev/docs/api-reference/antd/hooks/form/useForm)
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
plain-purple•14mo ago
it seems something is wrong because i don't see any call (get/post) on the data provider
my queryResult data is stuck to status loading
subsequent-cyan•13mo ago
Hey @dannywhiteagile, can you check if you are able to use
useOne
with same values in the same page without issues?plain-purple•13mo ago
it works using
const {
saveButtonProps,
handleSubmit,
refineCore: { queryResult, onFinish, formLoading },
register,
control,
formState: { errors },
} = useForm({
refineCoreProps: {
action: "edit",
resource: "users",
id : user?.id
},
});
it seems an error on the documentation, because in some part it tells to use refineCoreProps, in other, not