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

2024-06-16 04:08

本文主要是介绍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

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

这篇关于React中对于this.setState参数为函数或对象的问题。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1065421

相关文章

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法:数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高;分治法高效但实现复杂;位图法可读性差,但存储空间受限... 目录三种方法:方法概要数据库排序(http://www.chinasem.cn对数据库设备要求较高)分治法(常

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

Python调用另一个py文件并传递参数常见的方法及其应用场景

《Python调用另一个py文件并传递参数常见的方法及其应用场景》:本文主要介绍在Python中调用另一个py文件并传递参数的几种常见方法,包括使用import语句、exec函数、subproce... 目录前言1. 使用import语句1.1 基本用法1.2 导入特定函数1.3 处理文件路径2. 使用ex

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

关于@MapperScan和@ComponentScan的使用问题

《关于@MapperScan和@ComponentScan的使用问题》文章介绍了在使用`@MapperScan`和`@ComponentScan`时可能会遇到的包扫描冲突问题,并提供了解决方法,同时,... 目录@MapperScan和@ComponentScan的使用问题报错如下原因解决办法课外拓展总结@

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J