时间戳

首页 > 解决方案 > 如何避免错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用吗？

reactjs - 如何避免错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用吗？

问题描述

我有单独的文件，我在其中获取和发布 axios 调用。所以在这个文件中我有这个代码

  import { useSelector, useDispatch } from "react-redux";
  import __ from 'lodash'
  import axios from "axios";
  import { getPersistedToken } from "src";
  import { PROCESS_STATUS } from "src/model";


  export const getAxiosQuery = (endpoint) => async () => {
    const dispatch = useDispatch()
    console.log(dispatch)

     return await axios.get(endpoint, {
       headers: {
       'Authorization': 'Bearer ' + getPersistedToken(),
      }
   }).then((res) => {
   dispatch(processStatusAction(PROCESS_STATUS.DONE))
   return res
   },
  ).catch(error => {
  dispatch(processStatusAction(PROCESS_STATUS.FAIL))
 });
}

有什么方法可以允许在我的函数中使用反应钩子吗？因为我不会在我所有的调用中传递这个函数的参数中的调度变量

标签： reactjsreact-hooks

解决方案

有什么方法可以允许在我的函数中使用反应钩子吗？因为我不会在我所有的调用中传递这个函数的参数中的调度变量

不，你不可能在你的函数中使用钩子。你只能在（功能性）React 组件中使用钩子。信息在这里。

在您的情况下，您可以做的是创建一个自定义钩子（例如useAxiosQuery），它检索dispatch函数并自动注入它，例如：

const useAxiosQuery = (endpoint) => {
  const dispatch = useDispatch();
  
  return getAxiosQuery(endpoint, dispatch);
}

推荐阅读