skip to Main Content

I’m sorry for my English. I’m using a translator. I have the following problem. I’m trying to use a function from another component, but it gives me the following error.

I will leave the code extract:enter image description here

I used useEffect to display the data for an id depending if that id has records:

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;
    }
}

the function comes from another component as follows:

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,
    };

}

and when using it, the console tells me that getOrderByTable is not a function

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>

  );
}

adjunto imagen
enter image description here

2

Answers


  1. Chosen as BEST ANSWER

    I appreciate the review, due to fatigue I did not notice that the name of the function did not match a letter and that is why it gave me an error, I will take the recommendation to copy and paste the names of the functions in the future, I consider this question closed. Thank you so much.


  2. There is a typing mistake in your code. You’re exporting the function as getOrderByTable from your custom hook useOrder but you’re importing it as getOrdersByTable instead of getOrderByTable in your OrdersHistory component.

    If you want to rename your function, you can do it as below

     const { getOrderByTable as getOrdersByTable } = useOrder();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search