React中setState数据合并

数据展示

constructor(props){
        super(props);
        this.state={
            name:['流行','新款','精选'],
            currentTitle:'流行',
            increment:"Hello,World",
            title:'coderWhy'
        }
    }
    render(){
        const {name,currentTitle,increment,title} =this.state
        return(
            <div>
                <CurrentBar itemClick={index=>this.itemClick(index)} titles={name}/>
                <h2>{currentTitle}</h2>
                
                <Home />
                <About />
                <Header/>
                <h2>当前的文本为:{increment}</h2>
                <h2>{title}</h2>
                <button onClick={e=>this.changText()}>改变文本</button>
                <button id="btn">改变文本2</button>
            </div>
        )
    }

使用setState更改数据

changText(){
        setTimeout(()=>{
            this.setState({
                increment:'Hello,World',
                title:'kobi'
            })
            console.log(this.state.increment);
        },0)
    }

正常修改数据

使用函数的方法可以进行累加

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

 

posted @ 2022-01-09 13:25  无何不可88  阅读(319)  评论(0)    收藏  举报