JavaScript 原型，如何在鏈接時分配變量？

Question

我正在研究反應。 我在使用原型時遇到了麻煩。

我想在鏈接時分配一個變量。 slice function 返回的數組數量應分配在count state 上。

我要實現的不是 go 到超過內容計數的頁面。 為了實現這一點，我想我應該在slice function 工作時分配count state。 如何分配count ？

我在沙箱中輸入代碼。 https://codesandbox.io/s/blissful-rosalind-15e7od?file=/src/App.js下面是相同的內容。

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const rows = [
    { id: 1, name: "a" },
    { id: 2, name: "b" },
    { id: 3, name: "c" },
    { id: 4, name: "d" },
    { id: 5, name: "e" },
    { id: 6, name: "f" },
    { id: 7, name: "g" },
    { id: 8, name: "h" },
    { id: 9, name: "i" },
    { id: 10, name: "j" },
    { id: 11, name: "k" },
    { id: 12, name: "l" }
  ];

  const [count, setCount] = useState(rows.length);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(3);

  const handleLeft = () => {
    page > 1 && setPage(page - 1);
  };

  const handleRight = () => {
    page < Math.ceil(count / rowsPerPage) && setPage(page + 1);
  };

  return (
    <>
      <h3>
        count: {count}, page: {page}, rowsPerPage: {rowsPerPage}
      </h3>
      <button onClick={handleLeft}>left</button>
      <button onClick={handleRight}>right</button>
      {rows
        .filter((item) => item.id > 3)
        .slice(
          ...(rowsPerPage > 0
            ? [page * rowsPerPage, page * rowsPerPage + rowsPerPage]
            : [])
        )
        .map((item) => (
          <div key={item.id}>{item.id}</div>
        ))}
    </>
  );
}

請幫我。 提前致謝。

Answer 1

你為什么不試試這個沙盒鏈接

您希望繼續更新用例的原型是否有任何具體原因？

[更新沙盒鏈接]

請在下面的鏈接中找到您的解決方案。 分頁邏輯存在一些問題，但我相信你會處理它。 希望下面的沙箱鏈接有幫助

關聯

Answer 2

自定義鈎子實現

const usePagination = (data = [], rowPerPage = 3) => {
  const [currentpage, setCurrentPage] = useState(0);
  const totalItems = data.length;
  const maxPages = Math.ceil(totalItems / rowPerPage);

  const next = () => {
    setCurrentPage((page) => {
      const _page = page + 1;
      return _page < maxPages ? _page : page;
    });
  };
  const prev = () => {
    setCurrentPage((page) => {
      const _page = page - 1;
      return _page >= 0 ? _page : page;
    });
  };
  const itemsToList = useMemo(() => {
    const start = currentpage * rowPerPage;
    const end = start + rowPerPage;
    return data.slice(start, end);
  }, [rowPerPage, currentpage, data]);

  return {
    prev,
    next,
    itemsToList,
    maxPages,
    totalItems,
    currentpage
  };
};

代碼沙箱 鏈接