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
stormy-gold•12mo 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
exotic-emerald•12mo ago
Hey @dannywhiteagile, can you check if you are able to use
useOne with same values in the same page without issues?stormy-gold•12mo 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