No puedo entender por mi vida por qué recibo este error cuando uso mutaciones a través de React Query. Cualquier tipo de comentario sería apreciado.
Nota: estoy usando dentro de un componente de función (Reaccionar), por lo que no estoy seguro de por qué se arroja este error.
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 appcódigo:
const addAsset = (asset) => { return axios.post('http://localhost/api/file-upload', asset); } const fileUpload = () => { const url = 'http://localhost/api/file-upload'; let formData = new FormData(); let imagefile = document.querySelector('#file'); formData.append("image", imagefile.files[0]); const headers = { "Accept": 'application/json', "Authorization": `Bearer ${authToken}` } axios.post(url, formData, {headers}) .then(resp => { let okStatus = resp.status; let successMessage = resp.data.message; if(okStatus) { setShow(false); } setUploadSuccess(okStatus); setStatusMessage(successMessage); setStatusCode(okStatus); }).catch(error => { let errorMessage = error.response.data.message; let errorStatus = error.response.status; setStatusMessage(errorMessage); setStatusCode(errorStatus); }); const queryClient = useQueryClient(); return useMutation(addAsset, { onSuccess: () => { queryClient.invalidateQueries('uploads'); } }); } return(<Button variant="primary" onClick={fileUpload}>Upload!</Button>);Como dice el mensaje de error, los ganchos solo se pueden llamar en el cuerpo de un componente de función. No se pueden llamar en una devolución de llamada onClick. Deberá mover las llamadas de enlace fuera de fileUpload.
const queryClient = useQueryClient(); const { mutate } = useMutation(addAsset, { onSuccess: () => { queryClient.invalidateQueries('uploads'); } }); const fileUpload = () => { const url = 'http://localhost/api/file-upload'; // ... axios.post(url, formData, {headers}) .then( // ... mutate(/* insert variables here */); }Ver también: Reglas de Hooks