state 更新上的反应钩子重新渲染错误

Question

在我的应用程序中，我需要 map 一个对象数组，其中包含每个行数据索引的材质 UI 范围 slider。 在更改范围 slider （左右 slider 按钮的左按钮）之一的值时，需要将滑动/选择的值更新到名为另一个表的new count的字段中。

另外，从 slider 获得的值，假设10 selected ，它需要乘以键score_impact （来自对象数组）。 乘法后得到的值， updated_risk_score需要传递给仪表组件，以便它的指针会根据该值移动。 对于包含范围 slider 的数据表的每一行，都遵循该方法。

我面临的问题是，每当我尝试在迭代/映射中使用updated_risk_score更新 state 时，它都会给出一个错误，即Too many re-renders. React limits the number of renders to prevent an infinite loop. Too many re-renders. React limits the number of renders to prevent an infinite loop. 我试图比较值的变化，然后只更新 state 但错误仍然存在。 即使在出于相同目的使用本地存储之后，它也无法持久保存仪表的更新值。

这是代码的工作片段：

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

我已经被这个问题困扰了很长时间，因为我不熟悉使用钩子。 感谢您尽快解决此问题。

提前致谢。

Answer 1

setRiskScore(updated_risk_score); 当您使用 useState 并设置您的组件正在重新渲染的值时。 在您的情况下， setRiskScore() 每次都更新 state 并且每次重新渲染后您再次调用它

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