Я работаю над циклом for, который начинается с 1 столбца в window.innerHeight 530 пикселей и увеличивается на +1, если window.innerHeight увеличивается на 40.
Это то, что у меня есть прямо сейчас, но каждый раз пишет, что слишком много повторных рендеров. Кто-нибудь знает, почему?
let gridcolumns = 1;
useEffect(() => {
for (let i = 530; i < window.innerHeight; i += 40) {
gridcolumns += 1;
}
});
setColumnsAmount(gridcolumns);
Вам нужно добавить список зависимостей в ваш useEffect :
let gridcolumns = 1;
useEffect(() => {
for (let i = 530; i < window.innerHeight; i += 40) {
gridcolumns += 1;
}
setColumnsAmount(gridcolumns);
},[]);
Ваш вызов useEffect
не имеет массива зависимостей, поэтому его обратный вызов вызывается после рендеринга каждый. Затем обратный вызов выполняет setColumnsAmount
, который запускает повторный рендеринг, который запускает обратный вызов useEffect
, который запускает повторный рендеринг и т. д.
Вам нужно указать массив зависимостей, который говорит, что именно нужно изменить, чтобы вы захотели запустить обратный вызов, или вообще не используйте useEffect
для этого и выполните изменение columnsAmount
в обратном вызове события (возможно, событие resize
) .
Примечание: вы, вероятно, можете заменить цикл for
на const x = Math.floor(window.innerHeight / 40);
, а затем делать все, что хотите, с x
(например, вы можете добавить его к gridColumns
, если это действительно правильно).