挂钩调用无效。钩子只能在函数组件的主体内部调用。在 shopify 北极星
Invalid hook call. Hooks can only be called inside of the body of a function component. in shopify polaris
我正在使用 Shopify Polaris 构建一个应用程序,并且有一个通用的 post 数据方法来获取数据,但是当我这样做时,我得到以下 error.please 帮助我做到这一点
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);
});
});
}
试试这个:
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);
});
});
}
将 cookies
作为参数传入此函数并删除 useCookies
。然后将此代码:const [cookies, setCookie] = useCookies(['acToken']);
移动到您调用 PostData()
的位置,它应该可以工作
我正在使用 Shopify Polaris 构建一个应用程序,并且有一个通用的 post 数据方法来获取数据,但是当我这样做时,我得到以下 error.please 帮助我做到这一点
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);
});
});
}
试试这个:
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);
});
});
}
将 cookies
作为参数传入此函数并删除 useCookies
。然后将此代码:const [cookies, setCookie] = useCookies(['acToken']);
移动到您调用 PostData()
的位置,它应该可以工作