11 Replies
Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To call
useCustom
when a button is clicked, you can wrap the useCustom
hook inside a function and call that function on the button's onClick
event. However, the extracts provided do not contain a direct example of this.
Here's a general idea of how you can do it:
Please note that hooks should not be called conditionally or inside a callback, as it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). The example above is a simplified illustration and may not work as expected.
For more information on how to use the useCustom
hook, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
provincial-silver•15mo ago
So this might be good ? @kapa.ai
@kapa.ai si this might be good ?
Let me check the knowledge base for you. One moment! :books:
----------------------
Unfortunately, the code you provided will not work as expected because it violates the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html) in React. Hooks cannot be called inside callbacks, loops, conditions, or nested functions. They should always be used at the top level of your React function.
Instead, you can use the
useCallback
hook to create a memoized version of the function that will be triggered on the button click. Then, inside this function, you can use the useCustom
hook. However, the extracts provided do not contain a direct example of this.
Here's a general idea of how you can do it:
Please note that this is a simplified illustration and may not work as expected.
For more information on how to use the useCustom
hook, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
provincial-silver•15mo ago
@kapa.ai
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at Object.throwInvalidHookError (http://localhost:3000/static/js/bundle.js:299636:13)
at useContext (http://localhost:3000/static/js/bundle.js:319451:25)
at Y (http://localhost:3000/static/js/bundle.js:99096:60)
at Is (http://localhost:3000/static/js/bundle.js:98848:11)
at http://localhost:3000/static/js/bundle.js:4416:67
at onClick (http://localhost:3000/static/js/bundle.js:4590:38)
at handleClick (http://localhost:3000/static/js/bundle.js:110647:55)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:289295:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:289339:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:289396:35)
Rules of Hooks – React
The library for web and native user interfaces
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message you're seeing is due to a violation of the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html). Hooks can only be called at the top level of a React function component or a custom hook. They cannot be called inside callbacks, loops, conditions, or nested functions.
In your case, you're trying to call the
useCustom
hook inside a callback function (selectInstance
), which is not allowed.
Unfortunately, the useCustom
hook cannot be used directly in an event handler like onClick
because it's a hook and must follow the rules of hooks.
Instead, you can use the useCustomMutation
hook, which is designed for such use cases. It returns a mutate
function that you can call in response to events like button clicks.
Here's a general idea of how you can do it:
Please note that this is a simplified illustration and may not work as expected.
For more information on how to use the useCustomMutation
hook, you can refer to the useCustomMutation documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
provincial-silver•15mo ago
@kapa.ai j'ai l'erreur suivante : Not implemented custom on data provider.
Let me check the knowledge base for you. One moment! :books:
----------------------
The error message "Not implemented custom on data provider" suggests that the
custom
method is not implemented in your data provider.
In refine, the custom
method is used to make custom API requests that are not covered by the standard CRUD operations. If you're trying to use the useCustom
or useCustomMutation
hooks, you need to ensure that your data provider has a custom
method implemented.
Here's a general structure of how the custom
method can be implemented in a data provider:
Please note that the actual implementation of the custom
method will depend on your specific API and requirements.
For more information on how to create a custom data provider, you can refer to the Create Data Provider From Scratch (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) section in the refine documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below