Question

在我的应用程序中，我需要映射一个对象数组，其中包含每个行数据索引的材质UI范围滑块。在更改范围滑块之一（左和右滑块按钮的左按钮）的值时，需要将滑动/选定的值更新到另一张表的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

由于使用钩子是我的新手，所以我在这个问题上停留了很长时间。感谢您尽快解决此问题。

谢谢。

Answer 1

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

在状态更新时反应挂钩重新渲染错误

1 个答案: