setState异步问题(同一个函数中state无法同步更新)

import React, { Component } from 'react'

export default class App extends Component {
    state={
        count:0
    }
    //点击一次后
    increment=()=>{
        const {count}=this.state
        console.log("count前"+count);//0
        this.setState({count:count+1})
        this.setState({count:count+1})
        this.setState({count:count+1})
        console.log("count后"+count);//0
    }
    decrement=()=>{
        console.log("decrement"+this.state.count);//1
    }
    render() {
        console.log("渲染后"+this.state.count);//1

        return (
            <div>
                {this.state.count}
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
            </div>
        )
    }
}
/* 点击increment后increment中的state.count没有立即被渲染但是setstate会引发重新渲染,因此除去increment函数中的
state.count没被渲染,其他的都被渲染。
*/

class App extends React.Component {
  state = {
    counter: 0,
  }
  handleClick = () => {
    const { counter } = this.state;
    //或者 const counter = this.state.counter;
    this.setState({ counter: counter + 1 });
    this.setState({ counter: counter + 1 });
    this.setState({ counter: counter + 1 });
  }
  render() {
    return (
      <div>
        counter is: {this.state.counter}
        <button onClick={this.handleClick} >点我</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));
class App extends React.Component {
  state = {
    counter: 0,
  }
  handleClick = () => {
    this.setState(prev => ({ counter: prev.counter + 1 }));
    this.setState(prev => ({ counter: prev.counter + 1 }));
    this.setState(prev => ({ counter: prev.counter + 1 }));
    //这样是错的 this.setState(prev => {counter: prev.counter + 1});
    //这样是错的 this.setState(prev => {counter:++prev.counter});
    //这样是错的 this.setState(prev => {counter:prev.counter++});
  }
  render() {
    return (
      <div>
        counter is: {this.state.counter}
        <button onClick={this.handleClick} >点我</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

之所以成功是因为:传入多个 setState 的多个 Object 会被 shallow Merge,而传入多个 setState 的多个 function 会被 “queue” 起来,queue 里的 function 接收到的 state(上面是 prev )都是前一个 function 操作过的 state。

这样 counter(计数器)会更新失败

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});

要弥补这个问题,使用 setState() 的另一种形式,它接受一个函数而不是一个对象。这个函数有两个参数:
(1)第一个参数: 是当前最新状态的前一个状态(本次组件状态修改前的状态)
(2)第二个参数:是当前最新的属性props

// 正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

//注意:下面这样是错的
this.setState((prevState, props) => { //没将{}用()括起来,所以会解析成代码块
  counter: prevState.counter + props.increment
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值