从反应自定义挂钩调用的函数返回“不是函数”

Question

当我尝试从自定义挂钩调用函数时，当屏幕加载时出现错误，提示“handleLazyLoad”不是函数。我不确定为什么 React 无法弄清楚handleLazyLoad 是一个函数，我想我可能会错误地导出它或调用它。

自定义挂钩：

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;

发票屏幕组件：

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;

Answer 1

您将从自定义挂钩返回一个数组，因此在解构自定义挂钩时，顺序很重要。为了避免此类问题，您可以在自定义挂钩中更改此部分：

return [totalShownInvoices, handleLazyLoad];

到：

return {totalShownInvoices, handleLazyLoad};

然后你可以按如下方式对其进行解构，并且顺序并不重要：

const {handleLazyLoad, totalShownInvoices} = useLoadInvoices(
    1,
    totalInvoices,
  );