在React中更新状态的语法已经发生了很大变化.我正在尝试找到最简单,最优雅的方式来启动和更新它.
得到这个RN代码：
const { quotes } = require('./quotes.json')
class QuoteScreen extends Component {
state = {
QuoteIndex: 0
}
render() {
return (
<Image ...>
<View ...>
...
<ButtonNextQuote
onPress={() => {
this.setState((prevState,props) => {
return {
QuoteIndex: (prevState.QuoteIndex + 1) % (quotes.length - 1)
}
})
}}
/>
</View>
</Image>
)
}
}
是否有可能减少onPress中的状态更新？
解决方法
这是我将如何做到这一点.我在setState的回调(prevState)的第一个参数中使用了
object destructuring,出于性能原因,我使用了一个单独的函数而不是匿名函数.另外,请注意我不需要手动将函数绑定到此,因为我已经使用了箭头函数.
const { quotes } = require('./quotes.json')
class QuoteScreen extends Component {
state = {
QuoteIndex: 0
}
handleUpdateState = () => {
this.setState(({ QuoteIndex }) => ({
QuoteIndex: (QuoteIndex + 1) % (quotes.length - 1)
}));
}
render() {
return (
<Image ...>
<View ...>
...
<ButtonNextQuote
onPress={this.handleUpdateState}
/>
</View>
</Image>
)
}
}
