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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C++统计函数执行时间的最佳实践

《C++统计函数执行时间的最佳实践》在软件开发过程中,性能分析是优化程序的重要环节,了解函数的执行时间分布对于识别性能瓶颈至关重要,本文将分享一个C++函数执行时间统计工具,希望对大家有所帮助... 目录前言工具特性核心设计1. 数据结构设计2. 单例模式管理器3. RAII自动计时使用方法基本用法高级用法

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

HTTP 与 SpringBoot 参数提交与接收协议方式

《HTTP与SpringBoot参数提交与接收协议方式》HTTP参数提交方式包括URL查询、表单、JSON/XML、路径变量、头部、Cookie、GraphQL、WebSocket和SSE,依据... 目录HTTP 协议支持多种参数提交方式,主要取决于请求方法(Method)和内容类型(Content-Ty

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

GO语言中函数命名返回值的使用

《GO语言中函数命名返回值的使用》在Go语言中,函数可以为其返回值指定名称,这被称为命名返回值或命名返回参数,这种特性可以使代码更清晰,特别是在返回多个值时,感兴趣的可以了解一下... 目录基本语法函数命名返回特点代码示例命名特点基本语法func functionName(parameters) (nam