React中对于this.setState参数为函数或对象的问题。

前提:(作者)已经在create-react-app的环境下
相信大家都熟悉React中用于改变状态的this.setState(),在之前并且都已经用过了,this.setState去改变状态,之前我的操作都是直接对其中的属性做出改变,并没有传入对象去改变,但是也引发了一些问题,我也去网上看了一些播客,最后我在这总结一下。
话不多说,直接上代码

首先我们定义两个组建App1 与App2
App1:
在这里插入图片描述
render()渲染
在这里插入图片描述
这是之前的那个写法,但是当你点击button的时候回发现浏览器中,如下图:

在这里插入图片描述

解释:只实现了一次对count的更改。后来才明白原来,就是React中当对this.setState中的状态的操作,也就是对相同的状态的操作的时候,React里面有一个特性就是,当最后的组合的属性和前面的具有相同的时候,会默认最后的一个组合,这也就是说明了这3个this.setState,只默认了最后的一个this.setState,所以只会对count做出一次改变。类似于object.sgin({},…x,…x)对象的合并。

但是React中赋予了setState参数为对象(函数的形式,使之得到解决)

看App2
在这里插入图片描述

handle2方法中有一个对函数的封装如下:

在这里插入图片描述
render()渲染如下:
在这里插入图片描述

相当于我们给this.setState的参数传递的是一个对象即函数。让我们再点击一下这个按钮

在这里插入图片描述

大家可以看到一点击App2渲染出来的按钮之后,就能按照顺序的去启动了this.setState
从而一下子从1变成了4

剩下的就是读者们自己想了。有啥不懂的可以给我评论留言谢谢。

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值