Question

我正在尝试将一长串对象（帐户）转换为6个或更小的较小数组。我这样做是因为我的react组件中有一个表，该表列出了所有帐户，但是它不能容纳6个以上的帐户。我创建了分页和所有内容，并认为它可以工作，但是当前页面似乎从未更新过。

const [pageNum, setPageNum] = useState(1);
const [numOfPages, setNumOfPages] = useState(Math.ceil(accounts.length / 6));
const [page, setPage] = useState([]);
const [pages, setPages] = useState([null]);

const onClick = (e) => {
    setPageNum(pageNum + 1);
    setPage(pages[pageNum]);
};

useEffect(() => {
    if (numOfPages > 1) {
        for (let i = 0; i < 6; i++) {
            setPages(pages.push(accounts.slice(i * 6, i * 6 + 6)));
        }
    }
    console.log(pages[1][1]);
    console.log(pages[2][2]);
    setPage([pages[1][1], pages[1][2]]);
    console.log(page);
}, []);

这不是最终代码，而是我的疑难解答的一部分，我还认为问题出在哪里。当我管理日志页面[1] [1]和页面[1] [2]时，我得到了两个单独的对象。那么，在使用setPage并将两个“对象”放置在数组中之后，页面的控制台日志会以空数组的形式出现吗？我已经尝试了重构很多事情。我已经将页面更改为对象而不是数组，我尝试使用其他方法而不是useEffect来进行各种操作。但是，问题的根源似乎是我的“ setPage”和“ setPageNum”方法常常由于某种原因而失败。

Answer 1

使用useMemo准备页面数组（仅在accounts更改时才会更改）。

const { useState, useMemo, useCallback } = React;

const Pager = ({ accounts }) => {
  const [pageNum, setPageNum] = useState(0);

  const pages = useMemo(() => {
    const pages = [];

    for (let i = 0; i < accounts.length; i += 6) {
      pages.push(accounts.slice(i, i + 6));
    }

    return pages;
  }, [accounts]);
  
  // console.log(pages);

  const numOfPages = pages.length;

  const page = pages[pageNum];

  const next = useCallback(() => {
    setPageNum(pageNum => pageNum + 1);
  }, []);
  
  const prev = useCallback(() => {
    setPageNum(pageNum => pageNum - 1);
  }, []);
  
  return (
    <div>
      <button disabled={pageNum === 0} onClick={prev}>Prev</button>
      <button disabled={pageNum === numOfPages - 1} onClick={next}>Next</button>
      <ul>
        {pages[pageNum].map((s, i) => <li key={i}>{s}</li>)}
      </ul>
    </div>
  );
};

const accounts = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

ReactDOM.render(
  <Pager accounts={accounts} />,
  root
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

代码中的主要问题是使用setPages的方式：

setPages(pages.push(accounts.slice(i * 6, i * 6 + 6)));

Array.push()返回数组的新长度。因此，您的pages状态实际上是最后一个数字。这是最后一个数字，因为setState替换了状态，但未添加状态。

Answer 2

您要查找的术语是chunk。由于要分块的数据来自props，因此useEffect挂钩内不需要分块。这不是副作用。

这是我在互联网上找到的一个块函数：

function chunkArray(myArray, chunk_size){
    var index = 0;
    var arrayLength = myArray.length;
    var tempArray = [];

    for (index = 0; index < arrayLength; index += chunk_size) {
        myChunk = myArray.slice(index, index+chunk_size);
        // Do something if you want with the group
        tempArray.push(myChunk);
    }

    return tempArray;
}

如何在反应中使用钩子正确解构数组

2 个答案: