react中的this.setState()
发布时间：2020-12-15 20:34:18 所属栏目：百科 来源：网络整理
导读：修改组件的状态可以使用的一些方法： 1、比较常用的 this.setState({ message:"你好" }) 2、state更新是异步的时候 因为this.props和this.state可能是异步更新的，不能依赖他们的值去计算state， this.setState({ count:this.state.count+this.props.count }
|
修改组件的状态可以使用的一些方法： 1、比较常用的 this.setState({ message:"你好" }) 2、state更新是异步的时候 因为this.props和this.state可能是异步更新的，不能依赖他们的值去计算state， this.setState({ count:this.state.count+this.props.count }) 我们不能通过上面的代码得到想要的值，应该使用另一种setState()的形式，接受一个函数。这个函数的一个参数是前一个状态(prevState)，第二个参数是应用更新时的props, 第一种写法： ?this.setState((prevState,props)=>({count:prevState.count+props.count})) 第二种写法： this.setState((prevState,props)=>{return {count:prevState.count+props.count}}) 3、执行setState()后能拿到最新的state 值吗？ setState()函数接受两个参数，一个是一个对象，就是设置的状态，还有一个是一个回调函数，是在设置状态成功之后执行的，所以我们可以通过回掉拿到最新的state值。
this.setState(
????????{ data: newData },
????????() => {
????????????//这里打印的是最新的state值
????????????console.log(that.state.data);
????????}
????);
如果你希望在setState之前做些什么 可以使用前者的写法：
this.setState((preState,props) => {
????????????????????console.log(preState)??//在改变state中的数据之前，打印出当前的state
????????????????????return {auto: true}
????????????????},() => console.log(this.state.auto));//在更新state之后，利用回调打印出this.state.auto
?
调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State，计算下个State。
例如：
function add() {
??this.setState({count: this.state.count + 1});
??this.setState({count: this.state.count + 1});
??this.setState({count: this.state.count + 1});
}
直观上来看，当上面的add函数被调用时，组件状态的count值被增加了3次，每次增加1，那后count被增加了3，但是，实际上的结果state只增加了1。
?
原因是因为调用this.setState时，并没有立即更改this.state，所以this.setState只是在反复设置同一个值而已，上面的code等同下面这样的。
function add() {
??const currentCount = this.state.count;
??this.setState({count: currentCount + 1});
??this.setState({count: currentCount + 1});
??this.setState({count: currentCount + 1});
}
currentCount就是一个快照结果，重复地给count设置同一个值，不管重复几次，得到的结果也只是增加1而已。
想要使最后的结果是3，实现代码如下：
add = () => {
????????this.setState(prevState => ({
????????????count: prevState.count + 1
????????}));
????????this.setState(prevState => ({
????????????count: prevState.count + 1
????????}));
????????this.setState(prevState => ({
????????????count: prevState.count + 1
????????}));
????}
这样，每次改变count时，都是prevState.count + 1，pervState是前一个状态，当每次setState之后，前一个状态都会改变，结果就是想要的3了。如果需要立即setState 那么就需要传入一个函数来执行setState
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |