无效的挂钩调用.钩子只能在函数组件的主体内部调用.在 Shopify 北极星

Question

我正在使用Shopify Polaris构建应用程序，并有一个通用的发布数据方法来获取数据，但是当我这样做时，我收到以下错误。

错误：挂钩调用无效。钩子只能在身体内部调用 函数组件。以下情况之一可能会发生这种情况 原因：

1. 你可能有不匹配的 React 和渲染器版本(例如 React DOM(
2. 你可能违反了钩子的规则
3. 您可能在同一应用程序中有多个 React 副本 有关如何调试和 修复此问题。

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);
});
});
}

Answer 1

试试这个：

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()的位置，它应该可以工作