Как правильно деконструировать массив массивов с помощью хуков в реакции

Question

Я пытаюсь превратить длинный список объектов (учетных записей) в меньшие массивы из 6 или меньше. Я делаю это, потому что в моем компоненте реагирования есть таблица, в которой перечислены все учетные записи, однако она не может содержать более 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, все виды вещей. Но root проблемы заключается в том, что мои методы 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. Поскольку данные, которые вы собираете, поступают из реквизита, вам не нужен блок внутри хука useEffect. Это не побочный эффект.

Вот функция чанка, которую я нашел в inte rnet:

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