I am using Shopify Polaris to build an application and have a common post data method for fetching data but when I do this I am getting the following error.please help me to do this
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app Seefor tips about how to debug and fix this problem.
import Path from './Path';
import StatusValidation from './Validation';
import { useCookies } from 'react-cookie';
import React, {useCallback, useState, useEffect} from 'react';
export function PostBeforeLogin(pathValue, type, userData) {
return new Promise((resolve, reject) => {
fetch(Path(pathValue) + type, {
method:'POST',
body:JSON.stringify(userData),
headers: {'Content-Type':'application/json'},
})
.then((response) => StatusValidation(response))
.then((responseJson) => {
resolve(responseJson);
})
.catch((error) => {
reject(error);
});
});
}
export function PostData(pathValue, type, userData, formData = false) {
const [cookies, setCookie] = useCookies(['acToken']);
return new Promise((resolve, reject) => {
fetch(Path(pathValue) + type, {
method:'POST',
body: formData ? userData :JSON.stringify(userData),
headers: {
'Content-Type': formData ? 'multipart/form-data' : 'application/json',
'Authorization': 'Bearer ' + cookies.acToken
},
})
.then((response) => StatusValidation(response) )
.then((responseJson) => {
resolve(responseJson);
})
.catch((error) => {
reject(error);
});
});
}
try this:
export function PostData(pathValue, type, userData, formData = false, cookies) {
return new Promise((resolve, reject) => {
fetch(Path(pathValue) + type, {
method:'POST',
body: formData ? userData :JSON.stringify(userData),
headers: {
'Content-Type': formData ? 'multipart/form-data' : 'application/json',
'Authorization': 'Bearer ' + cookies.acToken
},
})
.then((response) => StatusValidation(response) )
.then((responseJson) => {
resolve(responseJson);
})
.catch((error) => {
reject(error);
});
});
}
pass cookies
in as an argument to this function and remove useCookies
. then move this code: const [cookies, setCookie] = useCookies(['acToken']);
to where you call PostData()
and it should work