for循环中的SetState按钮抛出Maximum Depth异常答案

【问题标题】：SetState button in for loop throws Maximum Depth exceptionfor循环中的SetState按钮抛出Maximum Depth异常
【发布时间】：2021-05-18 00:27:27
【问题描述】：

我正在尝试使用一排五个按钮在 React-Native 应用程序上实现 1 到 5 星评级，每个按钮将组件状态中的得分值设置为整数（1、2、3、4 或 5 )。

这是呈现五个按钮的行的函数：

renderRating(){
    return(
        <Row>
            <>{[1,2,3,4,5].map(star => this.renderStar(star))}</>
        </Row>
    )
}

下面是每个按钮的呈现方式：

renderStar(value){
    return( 
      <Col>
        <Button onPress={this.setState({score: value})}>
          <Text>{value}</Text
        </Button>
      </Col>
    )
}

但是，当我尝试渲染它时，我得到一个“超出最大更新深度”的异常。我实际上尝试单独编写所有 Col 元素，看看这是否是在 for 循环中放置“setState”函数的问题，但它也会在那里抛出异常。有什么解决方法吗？

【问题讨论】：

更改此：this.setState({score: value}) 为 () => this.setState({score: value})。您需要设置处理程序而不是调用它

标签： javascript react-native render

【解决方案1】：

用于更新状态的 setState 函数在状态更新时被渲染周期反复调用，然后发生重新渲染并再次调用函数，但您会收到此错误。

尝试在按钮按下时添加箭头功能：

<Button onPress={() => this.setState({score: value})}>

这意味着无论何时按下按钮，然后调用 setState。

【讨论】：