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

Question

我正在使用 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);
        });
    });
}

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

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

Invalid hook call. Hooks can only be called inside of the body of a function component. in shopify polaris

reactjs

react-hooks

polaris