JavaScript 原型，如何在链接时分配变量？

Question

I'm studying react. I have a trouble with using prototype.

I want to assign a variable while chaining. The number of array returned by slice function should be assigned on count state.

What I want to implement is not to go to the page which is over the count of contents. To implement that, I thought I should assign count state when slice function is working. How can I assign count ?

I typed codes in sandbox. https://codesandbox.io/s/blissful-rosalind-15e7od?file=/src/App.js Below is the same contents.

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

Please help me. Thanks in advance.

Answer 1

Why don't you try something like this sandbox link

Is there any specific reason as to why you wish to proceed with updating the prototype for your use case?

[UPDATED SANDBOX LINK]

Please find your solution on below link. There's some problem with the pagination logic but I am sure you'll take care of it. Hope the below sandbox link helps

Link

Answer 2

Custom hooks implementation

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

code sandbox link