首页 / REACT / React中setState合并
React中setState合并
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React中setState合并,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含747字,纯文字阅读大概需要2分钟。
内容图文
![React中setState合并](/upload/InfoBanner/zyjiaocheng/992/0e3dd84a9a97415c87bcf263b0ce3c03.jpg)
this.setState中的操作默认会合并
import React, { Component } from 'react'
export default class App extends Component {
constructor() {
super()
this.state = {
counter: 0
}
}
render () {
return (
<div>
<h2>{this.state.counter}</h2>
<button onClick={() => this.increase()}>+1</button>
</div>
)
}
increase() {
// this.setState({
// counter: this.state.counter + 1
// })
// this.setState({
// counter: this.state.counter + 1
// })
// 点击一次按钮,虽然进行了两次加一操作,但是两次会合并,counter结果是 1
// 给setState里面传一个函数就能解决这个问题, 上一次的值会传给prevState保存,想知道原理可以去看源码
this.setState((prevState, props) => {
return {
counter: prevState.counter + 1
}
})
this.setState((prevState, props) => {
return {
counter: prevState.counter + 1
}
})
// 结果为2
}
}
内容总结
以上是互联网集市为您收集整理的React中setState合并全部内容,希望文章能够帮你解决React中setState合并所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。