React中useEffect调用函数报错：getOrderByTable不是函数

问题描述 #

在React项目中调用自定义Hook内的函数时触发报错：Uncaught (in promise) TypeError: "getOrderByTable" is not a function

相关代码片段 #

1. API请求函数 getOrderByTableApi #

export async function getOrderByTableApi(idTable, status= "", ordering= ""){
    try {
        const tableFilter = `table=${idTable}`;
        const statusFilter = `status=${status}`;
        const closeFilter = "close=false";

        const url = `${BASE_API}/api/orders/?${tableFilter}&${statusFilter}&${closeFilter}&${ordering}`;
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

2. 自定义Hook useOrder #

import { getOrderByTableApi } from "../api/orders";

export function useOrder(){
    const [setLoading] = useState(true);
    const [setError] = useState(false);
    const [setOrders] = useState(null);

    const getOrderByTable = async (idTable, status, ordering) => {
      try {
        setLoading(true);
        const response = await getOrderByTableApi(idTable, status, ordering);
        setLoading(false);
        setOrders(response);
      } catch (error) {
        setLoading(false);
        setError(error);
      }
    };

    return{
        getOrderByTable,
    };

}

3. 使用Hook的组件 OrdersHistory #

import { useTables } from "../../hooks";

export function OrdersHistory() {
  const [idTable, setIdTable] = useState(null);
  const { getOrdersByTable } = useOrder();
  const { getTableByNumber } = useTables();

  useEffect(() => {
    (async () => {
      const table = await getTableByNumber(tableNumber);
      const idTableTemp = table[0].id;
      setIdTable(idTableTemp);

      getOrdersByTable(idTableTemp, "", "ordering=-status,-created_at");
    })();
  }, []);


  return (
           
          <p>Help please</p>

  );
}

错误原因与修复方案 #

核心错误原因 #

组件中解构useOrder返回值时存在拼写错误：

• 自定义Hook useOrder 暴露的函数名是 getOrderByTable（单数形式）
• 但OrdersHistory组件中误写为 getOrdersByTable（多了一个s），导致无法找到正确的函数，触发类型错误。

修复步骤 #

1. 修正组件中的解构代码：

// 原错误代码
const { getOrdersByTable } = useOrder();

// 修改为正确名称
const { getOrderByTable } = useOrder();

2. 同步修正useEffect中的函数调用：

// 原错误调用
getOrdersByTable(idTableTemp, "", "ordering=-status,-created_at");

// 修改为
getOrderByTable(idTableTemp, "", "ordering=-status,-created_at");

额外的状态声明错误修正 #

自定义Hook useOrder 中的状态声明写法不符合useState规范（useState返回值为[状态变量, 更新函数]），当前写法会导致状态管理异常，需同步修正：

// 原错误写法
const [setLoading] = useState(true);
const [setError] = useState(false);
const [setOrders] = useState(null);

// 修改为标准写法
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [orders, setOrders] = useState(null);

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