Cuando intento llamar a una función desde mi enlace personalizado, aparece un error cuando se carga la pantalla y dice que 'handleLazyLoad' no es una función. No estoy seguro de por qué React no puede darse cuenta de que handleLazyLoad es una función, estoy pensando que puedo exportarlo o llamarlo incorrectamente.
Gancho personalizado:
import { useState } from 'react'; const useLoadInvoices = (initialPageValue, totalInvoices) => { const [currentPage, setCurrentPage] = useState(initialPageValue); const pageSize = 30; const handleLazyLoad = () => { if (currentPage * pageSize < totalInvoices) setCurrentPage(currentPage + 1); }; const totalShownInvoices = currentPage * pageSize > totalInvoices ? totalInvoices : currentPage * pageSize; return [totalShownInvoices, handleLazyLoad]; }; export default useLoadInvoices;Componente de pantalla de factura:
import React from 'react'; import useLazyLoad from './hooks/useLazyLoad'; const InvoicesScreen = () => { const [invoices, setInvoices] = useState(null); const [totalInvoices, setTotalInvoices] = useState(null); const [handleLazyLoad, totalShownInvoices] = useLoadInvoices(1, totalInvoices); handleLazyLoad(); return ( <AccountPageList type="invoices" handleLazyLoad={() => handleLazyLoad()} start={1} finish={totalShownInvoices} total={totalInvoices} items={invoices} /> ); }; export default InvoicesScreen;Está devolviendo un Array de su enlace personalizado, por lo que al desestructurar el enlace personalizado, el orden es importante. Para evitar tales problemas, puede cambiar esta parte en su gancho personalizado desde:
return [totalShownInvoices, handleLazyLoad];a:
return {totalShownInvoices, handleLazyLoad};Entonces puedes desestructurarlo de la siguiente manera y el orden no importaría:
const {handleLazyLoad, totalShownInvoices} = useLoadInvoices( 1, totalInvoices, );El orden importa cuando se desestructura en una matriz.
const [totalShownInvoices,handleLazyLoad] = useLoadInvoices( 1, totalInvoices, );