Почему появляется бесконечный цикл и как его избежать?

Question

[Quintis]

Доброго времени суток , хочу написать простенький пагинатор на реакте , но при запуске функции paginatorPage для для загрузки первой страницы с параметром eForInit выбивает ошибка из-за бесконечного цикла. Как решить задачу ?

import React from 'react';
import { useState } from 'react';

export default function Paginator({obj}) {
    let [itemsPerButton]  = useState(10)
    let [startIndex , setStartIndex] = useState(0)
    let [finishIndex, setFinishIndex]  = useState(10)
    let [arrItems , setArrItems] = useState([])
    let arrButtons = []
    let arrList = []
    

    const paginatorPage=(e)=> {
        console.log(e)
        e.target.className="active"
        let basicNum = e.target.value;
        setFinishIndex(finishIndex=basicNum*10)
        arrList =[]
        for (  setStartIndex(startIndex=basicNum*10-10) ;startIndex < finishIndex && startIndex <= obj.length-1 ; startIndex++) {
            arrList.push(<p key={obj[startIndex].title}>{obj[startIndex].title}</p>)
        }
        setArrItems(arrItems=[...arrList])
    }
    let eForInit = {
        target:{
            value:1,
            className:''
        }
    }
        paginatorPage(eForInit)



    let buttons = Math.ceil(obj.length/itemsPerButton);
  
    for (let index = 1; index <= buttons; index++) {
        arrButtons.push(
    <button value={index} key={index} onClick={(e)=>{paginatorPage(e)}}>{index}</button>
    )}
  

    return (
        <>
        <div>
            i am Paginator , data length is {obj.length}
        </div>
        {arrItems}
        <div>
        {arrButtons}
        </div>
        </>
    )
}

Answer 1

[Владимир Проскурин]

У вас paginatorPage вызывается внутри рендера, а он меняет стейт, что вызывает перерендер, а в рендере вызывается paginatorPage, и так вечно.

Дополнение:

1) paginatorPage должен быть либо функцией, либо функцией обработчиком, но не одновременно как у вас, из-за чего приходится костылить с созданием липового event'a.
2) У вас в описании цикла for зачем-то setState.
3) Не используйте в качестве key индекс массива.
4) Эта строка излишня
onClick={(e)=>{paginatorPage(e)}}
Можно просто написать
onClick={paginatorPage}
а paginatorPage обернуть в useCallback.
5) Что тут происходит, я не понял
setArrItems(arrItems=[...arrList])
но понял точно, что происходит совсем не то, что вы от этого ждете.
6) Где сеттер для?
let [itemsPerButton] = useState(10)
7) Точки с запятой, у вас они отсутствуют, ставьте их всегда.
8) Так нельзя писать
setFinishIndex(finishIndex=basicNum*10)
Во первых, finishIndex это стейт, его нужно менять только через соответствующую функцию set*, во вторых, не нужно производить присваивания внутри каких-то других операциях, т.к. код становится непонятным и запутанным.

Comments

[Quintis]

2) У вас в описании цикла for зачем-то setState.

5) Что тут происходит, я не понял
setArrItems(arrItems=[...arrList])

это вы про этот кусок setArrItems(arrItems=[...arrList]) ?Он просто копирует с массива arrList который заполнился после цикла for в arrItems который выводится на экран.

6) Где сеттер для?
let [itemsPerButton] = useState(10)

Для меня не нужен , потому что хочу по 10 элементов на страницу повсюду

8) Так нельзя писать
setFinishIndex(finishIndex=basicNum*10)
Во первых, finishIndex это стейт, его нужно менять только через соответствующую функцию set*, во вторых, не нужно производить присваивания внутри каких-то других операциях, т.к. код становится непонятным и запутанным.

ну так setFinishIndex это сетер для него : let [finishIndex, setFinishIndex] = useState(10),
первый параметр переменная , второй функция для изменения переменной
За другие советы спасибо , но все же , как делать пагинацию ? Можете скинуть информацию как его делать ?