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

Question

我正在尝试在一个React-Native应用程序上使用一行五个按钮，每个按钮将组件状态中的评分值设置为整数(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"函数，但它也在那里抛出异常。有什么解决办法吗?

Answer 1

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

有一个尝试添加箭头功能按钮按下:

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

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