for 循环中的 SetState 按钮抛出最大深度异常

Question

我正在尝试使用一行五个按钮在 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 元素，看看这是否是将“setState”函数放入 for 循环中的问题，但它也会在那里抛出异常。有什么解决方法吗？

Answer 1

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

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

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

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

for 循环中的 SetState 按钮抛出最大深度异常

SetState button in for loop throws Maximum Depth exception

javascript

render

react-native