React解决setState异步带来的多次修改合一和修改后立即使用没有变化问题

news2024/11/22 16:07:58

我们编写这样一段代码

import React from "react"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        cont: 0
      }
    }

    componentDidMount() {
      this.setState({
        cont: this.state.cont+1
      })
    }

    render(){
      return (
        <div>
           { this.state.cont }
        </div>
      )
    }
}

我们在state中定义了一个cont 值是 0 然后 在componentDidMount 页面第一次渲染完成后执行的生命周期中 给他加一 然后我们运行代码
在这里插入图片描述
没错 一开始是0 页面第一次挂载完成 加一 变成了 1 是没问题的 然后我们将componentDidMount的代码改成这样
在这里插入图片描述
给他多加几次
在这里插入图片描述
但是 运行之后 我们会惊奇的发现 还是1
因为 setState 这个函数是个异步执行的 所以 相当于 他们接到的this.state.cont都是0 那0加一 自然就是 1了
所以 相当于 三次都给出了同样的值

那么 想解决这个问题 我们可以这样写

import React from "react"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        cont: 0
      }
    }

    componentDidMount() {
      console.log("componentDidMount");
      this.setState((proState,props) => ({
        cont: proState.cont+1,
      }))
      this.setState((proState,props) => ({
        cont: proState.cont+1
      }))
      this.setState((proState,props) => ({
        cont: proState.cont+1
      }))
    }

    render(){
      return (
        <div>
           { this.state.cont }
        </div>
      )
    }
}

setState直接去那上一次的值 做操作
最后 得到了 6 因为 componentDidMount 执行了两次 不过 至少验证了 我们这个方法解决了异步连续调用的问题
在这里插入图片描述
然后 就是另一个问题 我们 componentDidMount 的代码改成这样

componentDidMount() {
  this.setState({
    cont: this.state.cont+1
  })
  console.log(this.state.cont);
}

在这里插入图片描述
就还是那个问题 因为 setState是异步的 所以 你在这之后打印 肯定也拿不到最新的值

我们改成这样

componentDidMount() {
  this.setState({
    cont: this.state.cont+1
  }, () => {
      console.log(this.state.cont);
  })
}

在这里插入图片描述
setState其实提供了一个 修改完成后的回调
我们再回到中输出即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/702401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu下编译VTK

1.先安装QT&#xff0c;不知道不装行不行&#xff0c;我们项目需要。 2.去VTK官网下载VTK源码。 3.解压源码。 4.编译需要用cmake-gui&#xff0c;装QT的一般都有&#xff0c;但需要把路径添加到PATH才能用。 5.打开cmake-gui&#xff0c;设置源码路径&#xff0c;编译输出路…

项目——学生信息管理系统6

目录 权限的处理 在 MainFrm中定义 一个 权限判断的方法 在 MainFrm 的构造方法中调用一下 测试用学生身份登录 测试用教师身份登录 接下来&#xff0c;我们到学生列表页面里面 ManageStudentFrm&#xff0c;继续权限的设置&#xff0c;学生只能查看自己的信息&#xff0c…

神坑:ElasticSearch8集群启动报错“Device or resource busy”(Docker方式)

昨天在Docker中配置ElasticSearcch8集群模式时&#xff0c;先初步配置了master主节点。然后主节点启动就报错&#xff0c;看日志&#xff0c;提示“Device or resource busy”。异常第一句大概这个样子&#xff1a; Exception in thread "main" java.nio.file.FileS…

WMS 窗口属性

WMS 窗口属性 1、窗口类型与层级1.1 Application Window普通应用程序窗口1.2 Sub Window子窗口1.3 System Window系统窗口 2、层级值与窗口类型2.1 WindowState2.2 WindowManagerPolicy 窗口管理的策略机制2.3 WindowToken句柄 3、窗口属性 LayoutParams Activity的预览窗口Sta…

基于51单片机的秒表系统

目录 基于51单片机的秒表系统一、原理图二、部分代码三、视频演示 基于51单片机的秒表系统 一、原理图 二、部分代码 #include <reg52.h>#define duanxuan P2 #define weixuan P1unsigned char code wxcode[]{0X01, 0x02, 0x04, 0x08, 0X10, 0X20, 0X40, 0X80};…

C# WPF 路径动画

路径动画&#xff1a;一个东西沿着你画的的线跑。 微软对这个有很详细的说明&#xff0c;有需要请参照微软Learn网站 cs的代码 PathGeometry pathGeometry new PathGeometry();PathFigure pathFigure new PathFigure();//pathFigure.IsClosed true;pathFigure.StartPoint…

试着攻击自己写的网站

背景介绍 概念简介 CSRF XSS攻击是一种常见的安全攻击&#xff0c;它通过伪造用户输入&#xff0c;利用CSRF漏洞获取用户的敏感信息或者执行恶意操作。CSRF XSS攻击不仅会给用户带来损失&#xff0c;还会对互联网安全造成威胁。因此&#xff0c;防范CSRF XSS攻击已经成为了当…

C++ - 20230629

一. 思维导图 二. 练习 #include <iostream> using namespace std;class Person { private:int age;int *p; public://无参构造Person():p(new int(89)){age 18;}//有参构造Person(int age,int num){this->age age;this->pnew int(num);}//拷贝构造函数Person(P…

jmeter:BeanShell预处理程序获取/设置/引用变量

BeanShell预处理程序 1、局部变量 获取局部变量&#xff1a;vars.get("变量名") 设置局部变量&#xff1a;vars.put("变量名",变量值) 调用 ${变量名} 2、全局变量 获取局部变量&#xff1a;props.get("变量名") 设置局部变量&#xff1a…

使用 JCommander 解析命令行参数

前言 如果你想构建一个支持命令行参数的程序&#xff0c;那么 jcommander 非常适合你&#xff0c;jcommander 是一个只有几十 kb 的 Java 命令行参数解析工具&#xff0c;可以通过注解的方式快速实现命令行参数解析。 这篇教程会通过介绍 jcommadner &#xff0c;快速的创建一…

【WinRAR技巧】如何合并RAR分卷压缩文件?

很多小伙伴在压缩RAR文件的时候&#xff0c;会选择分卷压缩&#xff0c;便于网上上传、下载或邮件发送。 那如果后续不需要分卷压缩了&#xff0c;如何将RAR分卷压缩文件重新合并成一个文件呢&#xff1f;下面小编来分享一下具体的操作方法。 一般来说&#xff0c;我们都会选…

【C++初阶】C++STL详解(三)—— vector的介绍及使用

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C初阶 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C初阶】…

(三)灌溉系统WIFI通信部分

ESP8266 ESP8266S烧录器&#xff1a;CH430C arduino离线配置esp8266参考&#xff1a;参考文章 灯光闪烁就是烧录成功 ESP8266调试入门&#xff1a;参考文章 ESP8266调试&#xff1a;参考文章 人麻了已经&#xff0c;尝试半天了&#xff0c;AT指令没回应&#xff0c;尝试刷固…

Feed流实现

关注推送 关注推送也称为Feed流(直译为投喂)&#xff0c;为用户持续的提供“沉浸式”的体验&#xff0c;通过无限下拉刷新获取新的信息(如&#xff0c;短视频、博客等)。 获取信息的两种模式 传统模式&#xff1a;需要用户自己去根据所需去查询内容。 Feed模式&#xff1a;…

八、Docker安装MySQL主从

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、pull一个mysql镜像二、主服务器master配置2.1 新建主服务器容器实例2.2 配置master的my.cnf2.3 重启master容器实例并验证2.4 master容器实例内创建数据同步用户 三…

JVM知识扫盲篇

JVM扫盲 一&#xff1a;故事背景二&#xff1a;知识点主要构成2.1 JVM为什么能跨平台2.2 JVM整体结构2.1 类加载子系统2.1.1 概述2.1.2 具体类加载器2.1.3 双亲委派机制2.1.4 Tomcat为什么要自定义类加载器 2.2 运行时数据区2.2.1 整体概念2.2.2 程序计数器的作用2.2.3 虚拟机栈…

MySQL - 数据库级别的外键

1. 外键 FOREIGN KEY (了解) 测试数据 &#xff1a; 学生表 CREATE TABLE IF NOT EXISTS student (id INT(4) NOT NULL AUTO_INCREMENT COMMENT 学号,name VARCHAR(30) NOT NULL DEFAULT 匿名 COMMENT 姓名,pwd VARCHAR(20) NOT NULL DEFAULT 123456 COMMENT 密码,sex VARC…

在 Mac 上安装 K8S

本篇文章将介绍如何在 Mac 上使用 minikube 搭建单机版的 Kubernetes。 安装步骤 安装 Docker 安装 docker 主要是用于提供容器引擎。直接下载安装即可。 下载地址 安装 Kubectl 推荐使用 home brew 安装 brew install kubectl可以使用下面的命令查看是否已经安装完毕 …

MAYA粒子圈

无法修改 完成一圈的时间