Используемый цикл For слишком много повторных рендеров.

Я работаю над циклом 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);
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно добавить список зависимостей в ваш 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, если это действительно правильно).

Другие вопросы по теме

Похожие вопросы

Ошибка: ожидалось, что слушатель onClick будет функцией, вместо этого получил значение типа `object`
React + TypeScript: передача компонентов в массиве в качестве реквизита
Удалить повторяющиеся объекты с условием
Параметры раскрывающегося списка - перенаправление на пользовательский URL в зависимости от выбранного параметра
Как проверить, есть ли две (или более) косые черты в строке элемента массива с помощью Javascript
Как мне написать html для формы с несколькими вопросами, которые используют тип ввода радио?
Как добавить идентификатор пользователя к взаимодействию с кнопкой?
Динамическое количество столбцов сетки css
Можно ли получить JSON из URL-адреса и сохранить его как файл json с произвольным именем внутри указанного пути/папки через внешний интерфейс?
Округленное число до наиболее подходящего ближайшего числа, чтобы я мог рассчитать интервал с коэффициентом 2, 5 или 10.