太多的重新渲染。 React 限制渲染数量以防止无限循环滑块答案

【问题标题】：too many re-renders. React limits the number of renders to prevent an infinite loop sliders太多的重新渲染。 React 限制渲染数量以防止无限循环滑块
【发布时间】：2020-01-19 23:40:57
【问题描述】：

我有一个滑块，当它移动以分配一些值时，它会抛出错误

Invariant Violation:Toomany re-renders

这是代码

    const [term, setvterm] = useState();

if( Value > 0) setvterm(Value)

<View style={{alignItems: 'stretch', justifyContent: 'center' }}>
    <Slider 
    maximumValue={D > 0 ? 3: 2 }
    minimumValue={0}
    step={1}
    value={valuesFromApi.indexOf(Value)}
    onValueChange={index => setValue(valuesFromApi[index])} 
    />
    <View style={styles.plazos}>
    <Text style={styles.plazo1}>{A} meses</Text>
    <Text style={styles.plazo2}>{B} meses</Text>
    <Text style={styles.plazo3}>{C} meses</Text>
    {D > 0 ? <Text style={styles.plazo3}>{D} meses</Text>: null }
    </View>
    <Text style={styles.slideText}>Su credito por:  ${A}MXN</Text>
    <Text style={styles.slideText}>Usted recibe:    ${A}MXN</Text>
    <Text style={styles.slideText}>A un plazo de:  {Value} meses</Text>

    <Text style={styles.PaymentText}>Su pago: ${A}.00 MXN</Text>
</View>

我确定问题就在这里

   if( Value > 0) setvterm(Value)

但这是我发现将 Value 的值传递给术语的唯一方法

【问题讨论】：

是的，你有一个无限的渲染循环，因为你更新了每次渲染的状态。当Value 更新时，您可能需要一个useEffect 挂钩来发出副作用。 terms 是什么？
terms 在那一点上什么都不是，但这是我必须发送到 api 的变量名
if( Value > 0) setvterm(Value) 不是在 setValue 函数中吗？
您可以使用以下方式处理此问题：if (Value > 0 && Value !== term) { setvterm(value)) }

标签： reactjs react-native

【解决方案1】：

当您有设置值、渲染、然后再次设置值等的无限循环时，就会发生这种类型的错误。解决方案是确保仅在值发生更改时才重新渲染。您将需要跟踪以前的值。这是一篇解释如何做到这一点的文章：https://medium.com/@hegystyle/remembering-the-previous-value-of-a-prop-or-a-state-while-using-react-hooks-6f57686aa0a6

【讨论】：