状态更新时React钩子重新呈现错误

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