React自定义Hook调用报错：Hooks只能在函数组件体内调用

问题背景 #

我写了一个用于提交新分类的自定义Hook usePostCategory，但在其他组件调用时一直报错：

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

这个Hook需要接收参数并返回内容，试了好几种调用方式都不行，相关代码如下：

原usePostCategory Hook代码 #

export const usePostCategory = async (categoryName, id, catId) => {
  const data = { name: categoryName, a_id: id, cat_id: catId };
  
  const [message, setMessagge] = useState();

 
  try {
    const response = await axios.post(`url`, data, {
      headers: {... 
      },
    });
    if (response.status === 201) {
      
    }
  } catch (err) {
    
  }
  return { message };
};

原父组件调用代码 #

import {usePostCategory } from "../../../api/bagAPI/fetchBag";

function Foo(value, id, catID) {
  const  message  = usePostCategory(value, id, catID);
  return message;
}
const handleAddCategory = () => {
    setOpenAddCategory(true);
};

<Fab
  onClick={handleAddCategory}
  text="Category"
  icon={<AddIcon/>}>
</Fab>

<CustomFormDialog
  title="Add category"
  onClick={Foo}
  id={id}
  editCatId={currentCatId}
/>

原弹窗组件代码 #

const CustomFormDialog = ({ open, onClose, title, id, onClick, editCatId }) => {}
           <Button
            onClick={() => {
              onClick(value, id, editCatId);
            }}>

错误原因分析 #

1. Hook不能是async函数：React Hook本身不允许定义为异步函数，因为Hook需要严格按同步顺序执行，才能保证状态管理的一致性。
2. 调用位置违规：你在普通函数Foo里调用Hook，还把Hook/该函数传给按钮的onClick事件——事件回调属于普通执行上下文，不是函数组件的顶层作用域，完全违反了Hook的调用规则。Hook只能在函数组件的顶层作用域或其他自定义Hook内调用，绝对不能在事件处理、条件判断、循环逻辑里调用。

修正方案 #

第一步：重构usePostCategory Hook #

把异步请求逻辑封装到Hook内部的普通异步函数中，Hook本身保持同步：

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

export const usePostCategory = () => {
  const [message, setMessage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 定义供外部调用的提交函数
  const submitCategory = async (categoryName, id, catId) => {
    setLoading(true);
    setError(null);
    const data = { name: categoryName, a_id: id, cat_id: catId };
    
    try {
      const response = await axios.post(`url`, data, {
        headers: {
          // 填入你的请求头配置
        },
      });
      if (response.status === 201) {
        setMessage('分类提交成功');
      }
    } catch (err) {
      setError(err.message || '分类提交失败');
      setMessage(null);
    } finally {
      setLoading(false);
    }
  };

  return { message, loading, error, submitCategory };
};

第二步：调整父组件调用逻辑 #

在父组件顶层调用Hook，封装提交逻辑为普通事件函数后传给弹窗：

import { useState, useEffect } from 'react';
import { usePostCategory } from "../../../api/bagAPI/fetchBag";

function ParentComponent() {
  const { message, loading, error, submitCategory } = usePostCategory();
  const [openAddCategory, setOpenAddCategory] = useState(false);

  const handleAddCategory = () => {
    setOpenAddCategory(true);
  };

  // 封装提交逻辑，作为事件回调传给弹窗
  const handleSubmitCategory = (value, id, editCatId) => {
    submitCategory(value, id, editCatId);
    setOpenAddCategory(false);
  };

  // 处理提交后的消息提示
  useEffect(() => {
    if (message) {
      console.log(message);
      // 这里可以替换成UI提示，比如Toast
    }
    if (error) {
      console.error(error);
      // 错误提示逻辑
    }
  }, [message, error]);

  return (
    <>
      <Fab
        onClick={handleAddCategory}
        text="Category"
        icon={<AddIcon/>}
      />

      <CustomFormDialog
        title="Add category"
        open={openAddCategory}
        onClose={() => setOpenAddCategory(false)}
        onClick={handleSubmitCategory}
        id={id}
        editCatId={currentCatId}
        loading={loading}
      />
    </>
  );
}

第三步：调整弹窗组件代码 #

接收提交函数和加载状态，处理按钮点击逻辑：

import { useState } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button } from '@mui/material';

const CustomFormDialog = ({ open, onClose, title, id, onClick, editCatId, loading }) => {
  const [value, setValue] = useState('');

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <TextField
          value={value}
          onChange={(e) => setValue(e.target.value)}
          label="分类名称"
          fullWidth
          margin="normal"
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>取消</Button>
        <Button 
          onClick={() => onClick(value, id, editCatId)} 
          disabled={loading}
          variant="contained"
        >
          {loading ? '提交中...' : '提交'}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

关键注意点 #

• 自定义Hook永远不能是async函数，异步逻辑要放在Hook内部的独立函数中
• Hook必须在函数组件的顶层调用，不能嵌套在任何条件、循环或事件回调里
• 要把Hook提供的功能（比如提交逻辑）封装成普通函数，再作为事件回调传给子组件

内容的提问来源于stack exchange，提问作者Giovanni