Ошибка повторного рендеринга обработчика React при обновлении состояния - PullRequest
Новая
       38

Ошибка повторного рендеринга обработчика React при обновлении состояния

0 голосов
/ 14 июля 2020

В моем приложении мне нужно сопоставить массив объектов, которые содержат ползунок диапазона пользовательского интерфейса материала для каждого из индексов данных строки. При изменении значения одного из ползунков диапазона (левая кнопка левой и правой кнопок ползунка), сдвинутое / выбранное значение необходимо обновить в поле с именем new count другой таблицы.

Кроме того, значение, полученное с ползунка, предположим, 10 selected, его нужно умножить на ключ score_impact (из массива объектов). Значение, полученное после умножения, updated_risk_score необходимо передать компоненту датчика, чтобы его стрелка двигалась в соответствии с этим значением. Этот метод применяется для каждой строки таблицы данных, содержащей ползунок диапазона.

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я пытаюсь обновить состояние с помощью updated_risk_score внутри итерации / сопоставления, это дает ошибку, а именно , Too many re-renders. React limits the number of renders to prevent an infinite loop. Я попытался сравнить изменение значения, а затем только обновить состояние, но ошибка все еще сохраняется. Он также не может сохранить обновленное значение для датчика даже после использования локального хранилища для той же цели.

Вот рабочий фрагмент кода:

https://codesandbox.io/s/recursing-mclean-f9uej?file= /src/main.js

Я застрял в этой проблеме довольно долго, так как я новичок в использовании хуков. Приветствуется любая помощь, чтобы исправить это в ближайшее время.

Заранее спасибо.

1 Ответ

1 голос
/ 14 июля 2020

setRiskScore (updated_risk_score); Когда вы используете useState и устанавливаете значение, которое ваш компонент перерисовывает. В вашей ситуации setRiskScore () обновляет состояние каждый раз, и после каждого повторного рендеринга вы вызываете его снова

UPD. 

if (value_selected && value_selected.index === i) {
   percent_diff = formatPercent(percentValue.value, ele.current_count);
   updated_risk_score = Math.abs(ele.score_impact) * percentValue.value;
   if (updated_risk_score !== riskScore) {
       setRiskScore(updated_risk_score);
   }
   renderNewValue = Number(value_selected.value);
} else {
   renderNewValue = ele.current_count;
}
...