初学React,setState后获取到的thisstate没变,还是初始state

本文详细解析了React框架中setState方法的异步特性,解答了为何在调用setState后立即读取state未更新的问题,并提供了正确的状态更新检查方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

                问题: (javascript)初学React,setState后获取到的thisstate没变,还是初始state?
描述:

          getInitialState(){            return {data:[]};          },          componentDidMount(){            var data = [ { author: "Pete Hunt", text: "This is one comment" },                         { author: "Jordan Walke", text: "This is *another* comment" } ];            (function(data){              this.setState({data:data});              console.log(this.state.data);            }).call(this,data);          },

为什么log里打出来的data是[]呢?


解决方案1:

react 的 setState 是异步执行的,所以你后面立即 console 是还没改变状态, setState 函数接受两个参数,一个是一个对象,就是设置的状态,还有一个是一个回调函数,就是设置状态成功之后执行的,你可以这样:

(function(data){   var that = this;   this.setState({data:data}, function () {       console.log(that.state.data);   });}).call(this,data);

解决方案2:

不能立即 console.log(this.state.data);的,你可以在 render方法里取

解决方案3:

善用官方文档:

void setState(  function|object nextState,  [function callback])

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

所以正确做法是

this.setState(    Object.assign({}, { data }),    () => console.log(this.state))

           

给我老师的人工智能教程打call!http://blog.youkuaiyun.com/jiangjunshow
这里写图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值