reactjs - 无效的挂钩调用。钩子只能在函数组件的主体内部调用。在 shopify 北极星

Question

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

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
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()，它应该可以工作