Question

我需要有关自定义钩子的帮助。我创建了一个自定义钩子来进行api调用（useApiCall），我从我的 authActions.js 文件中调用它，以将用户名和密码发送到服务器以注册新用户。我收到一个错误消息，说我想念 useApiCall 功能组件中的钩子。

当我删除 useApiCall 功能组件中useReducer的逻辑时，它说我滥用了useState之后的useReducer。它不会让我在React功能组件useApiCall中使用钩子。

我知道我违反了钩子规则，但是那是什么规则？我将代码与其他自定义钩子进行了比较，没有区别。

在useApiCall函数中，我剥离了所有逻辑并使用了一个useState并得到了相同的错误。我在做什么错了？

从（authActions）呼叫的钩子：https://github.com/SMasood1/Chat-App/blob/main/client/src/context/authContext/authAction.js

自定义挂钩（useApiCall）：https://github.com/SMasood1/Chat-App/blob/main/client/src/context/a

import { useState, useEffect, useReducer } from 'react';

// Can make this more elegant and able to handle different types of methods and headers

const FETCH_INIT = 'FETCH_INIT';
const FETCH_SUCCESS = 'FETCH_SUCCESS';
const FETCH_FAILURE = 'FETCH_FAILURE';

const dataReducer = (state, action) => {
  switch (action.type) {
    case FETCH_INIT:
      return {
        ...state,
        isLoading: true,
        isError: false
      }
    case FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload
      }
    case FETCH_FAILURE:
      return {
        ...state,
        isLoading: false,
        isError: true,
        data: action.error
      }
    default:
      throw new Error();
  }
}
export const useApiCall = (initialUrl, initialMethod, initialData) => {
  const [state, dispatch] = useReducer(dataReducer, {
    isLoading: false,
    isError: null,
    data: initialData ? initialData : ''
  })

  const [method, setMethod] = useState(initialMethod ? initialMethod : null);
  const [url, setUrl] = useState(initialUrl ? initialUrl : '');
  useEffect(() => {
    const fetchData = async () => {
      await dispatch({ type: FETCH_INIT });
      let response;
      try {
        switch (method) {
          case 'GET':
            response = await fetch(url);
            break;
          case 'POST':
            response = await fetch(url, {
              method: method,
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(state.data)
            });
            break;
          default:
            console.log('Incorrect HTTP Request Method');
        }
        if (response.ok) {
          let resBody = await response.json();
          dispatch({ type: FETCH_SUCCESS, payload: resBody });
        } else {
          let resBody = await response.json();
          dispatch({ type: FETCH_FAILURE, error: resBody });
        }
      } catch (error) {
        dispatch({ type: FETCH_FAILURE, error: 'Unable to send request!' });
      }
    }
    if (method && url) {
      fetchData();
    }
  }, [url, method, state.data]);
  return [state, setUrl, setMethod]
}

我收到的错误如下：

未捕获（承诺）错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。这可能发生由于以下原因之一：

您可能使用了不匹配的React和渲染器版本（例如React DOM）

您可能正在违反挂钩规则

您可能在同一应用中拥有多个React副本

在自定义钩子中使用钩子时引发了钩子错误的无效使用？

0 个答案: