setState 数据合并

时间:2021-08-11
本文章向大家介绍setState 数据合并，主要包括setState 数据合并使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
import React, { Component } from 'react'

export default class App extends Component {

    constructor(props){
        super(props)
        this.state = {
            counter:0,
            name:'Eric'
        }
    }
    render() {
        return (
            <div>
                <h2>当前计数: {this.state.counter}</h2>
                <h2>{this.state.name}</h2>
                <button onClick={e=>this.increment()}>+1</button> 
            </div>
        )
    }
    increment(){   
        
        // 1 setState 本身被合并
        // this.setState({
        //     counter: this.state.counter + 1
        // })   

        // this.setState({
        //     counter: this.state.counter + 1
        // })

        // 2 setState 合并时进行累加
        this.setState((prevState,props)=>{
            return {
                counter: prevState.counter + 1
            }
        }) 

        this.setState((prevState,props)=>{
            return {
                counter: prevState.counter + 1
            }
        }) 

        this.setState((prevState,props)=>{
            return {
                counter: prevState.counter + 1
            }
        }) 
    }
}
我是Eric,手机号是13522679763

原文地址：https://www.cnblogs.com/eric-share/p/15129326.html

随机文章
本站知识点必读
最近更新