setState是否是异步的

Question

在构造方法中对this.state.age进行初始化为0，然后通过按钮的单击事件对该属性进行变更alert变更后的值。

发现第一次点击按钮弹出来的是0，第二次才是变更后的值

constructor(){

super();

this.state = {userName : 'sugs' , age : 0};

};

buttonClick(ageCode){

this.setState({

age : ageCode

});

alert(this.state.age);

}

完整代码如下

import React from 'react';

import ReactDom from 'react-dom';

import propTypes from 'prop-types';

import BodyChildren from './bodyChildren';

class BodyIndex extends React.Component {

componentWillMount(){

console.log("BodyIndex - componentWillMount");

};

componentDidMount(){

console.log("BodyIndex - componentDidMount");

};

constructor(){

super();

this.state = {userName : 'sugs' , age : 0};

let t = setTimeout(() => {

this.setState({userName : 'suguisong'})

}, 3000);

};

childValueChg(event){

this.setState({

text : event.target.value

});

};

buttonClick(ageCode){

this.setState({

age : ageCode

});

alert(this.state.age);

}

render() {

console.log("BodyIndex - render");

let userName = this.state.userName;

let boolean = false;

let html = 'react studio ';

return (

<div>

<b>body部分 …… ……</b><br/>      

<input type="button" value={'我是input类型的按钮'} onClick={this.buttonClick.bind(this, 68)}/>

<br/><br/><br/>

<BodyChildren childValueChg={this.childValueChg.bind(this)}/>

<p>子页面返回：{this.state.text}</p>

<b>{userName == '' ? '用户未登录' : '用户名：' + userName}</b><br/><br/>

<b>{html}</b><br/>

{ /** 两种方法：1、使用uncode转码&nbsp;等字符    2、使用dangerouslySetInnerHTML方法，但是小心恶意攻击 */ }

<b dangerouslySetInnerHTML={{__html : html}}></b><br/><br/>

<b>接收父页面的年龄：{this.props.age}</b><br/>

</div>

)

};

}

BodyIndex.propTypes = {

age : propTypes.number.isRequired

}

BodyIndex.defaultProps = {

age : 86

}

export { BodyIndex as default };

Answer 1

Parry 2017-12-05 16:32:29

这是react机制，它会将所有的值存储在一个地方，然后统一的进行一次更新。这是 setstate 的核心机制。

• 提问者 慕无忌0079048 #1

  老师您是指要等click的方法执行完后统一更新吗，还是要什么时候统一进行更新？
  
  另外，如果我想第一次点击的时候就弹出更改后的值有办法实现吗

• Parry 回复 提问者 慕无忌0079048 #2

  晚上我找一点资料给你，如果你要强制更新的话，是有一个方法可以进行强制更新的。

• Parry 回复 提问者 慕无忌0079048 #3

  http://m.blog.csdn.net/lanadeus/article/details/77387596

点开查看后面1条评论