react使用++或者--改变state状态值问题和Useless constructor no-useless-constructor

2023-10-29

写了一个点击事件,点击一下值加一,但是点击事件如下书写无效,并未改变状态值

    add() {
        this.setState({
            likes: this.state.likes++
        })
    }

这里应该如下书写:

    add() {
        this.setState({
            likes: ++this.state.likes
        })
    }

此时点击改变状态值功能完成,但控制到给出警告信息如下:
在这里插入图片描述
此时应该先将状态值进行赋值再进行运算操作,此时控制台不再报错

add() {
        let like = this.state.likes
        this.setState({
            likes: ++like
        })
    }

接下来讲代码运行时控制台给出警告:Useless constructor no-useless-constructor
代码和警告信息如下:
在这里插入图片描述
在这里插入图片描述
这是因为缺少state,只要定义一下state即可解决
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react使用++或者--改变state状态值问题和Useless constructor no-useless-constructor 的相关文章

  • React重点知识拓展,含Hooks、路由懒加载等

    第7章 React扩展 一 setState 1 setState更新状态的2种写法 setState stateChange callback 对象式的setState stateChange为状态改变的对象 该对象可以体现出状态的更改
  • css in js开发利器 - styled-components(样式组件)

    styled components 是一个常见的 css in js 类库 和所有同类型的类库一样 通过 js 赋能解决了原生 css 所不具备的能力 比如变量 循环 函数等 注意 有时候 React 版本和 styled componen
  • Antd DatePicker 设置默认值报clone.weekday is not a function

    代码 dayjs版本1 11 7 页面 当点击页面日期框会报clone weekday is not a function 解决方法 在jsx文件中添加如下js import dayjs from dayjs import advanced
  • 虚拟列表的实现思路(附带react代码)

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算
  • React 初识之Umi项目搭建实战

    一 创建项目 创建之前需要安装 Node js 和 npm yarn 这俩个环境 在WebStorm里面创建一个项目 输入命令 yarn create umi 弹出选项 这里我们选择第二项APP 选择是否使用typescript 这里选no
  • react项目中使用react-dnd实现列表的拖拽排序

    现在有一个新需求就是需要对一个列表 实现拖拽排序的功能 要实现的效果如下图 可以通过 react dnd 或者 react beautiful dnd 两种方式实现 今天先讲下使用react dnd是如何实现的 github地址 https
  • 对useReducer的理解

    useReducer是React提供的一个高级Hook 它不像useEffect useState useRef等必须hook一样 没有它我们也可以正常完成需求的开发 但useReducer可以使我们的代码具有更好的可读性 可维护性 可预测
  • react的条件渲染(或者组件渲染)五种方式 --开发基础总结

    1 使用if的方式判断是否渲染某个组件 function UserGreeting props return h1 Welcome back h1 function GuestGreeting props return h1 Please
  • 在校学生如何白嫖黑群辉虚拟机和内网穿透,实现海量资源的公网访问?(小白专用)

    文章目录 前言 本教程解决的问题是 按照本教程方法操作后 达到的效果是 前排提醒 1 搭建群辉虚拟机 1 1 下载黑群辉文件 vmvare虚拟机安装包 1 2 安装VMware虚拟机 1 3 解压黑 群辉虚拟机文件 1 4 虚拟机初始化 1
  • 【Ant Design】Form.Item创建自定义表单

    一 概述 Antd是一个非常强大的UI组件库 里面的Form表单组件也基本能满足我们大多数场景 但是也有需要自定义表单的场景 Vue2里我们使用v model 结合子组件的model属性 来实现自定义组件的双向绑定 Vue3里我们使用v m
  • react组件状态同步-状态提升

    假设定义组件TemperatureInputSon import React from react class TemperatureInputSon extends React Component constructor props su
  • useEffect详情用法

    1 为什么要使用useEffect 想必大家都是用过vue吧 在vue框架所写的项目中 我们通过在与后端进行数据交互的过程中 通常都是会在生命周期中进行数据的请求 然后将数据返回给页面进行渲染 在React中我们也是这样 但是在函数式组件中
  • React核心概念:状态提升

    上一节 表单 下一节 组合vs继承 React核心概念 状态提升 引言 添加第二个输入框 编写转换函数 状态提升 经验总结 引言 很多情况下我们使用的多个组件需要对同一个数据做出对应的反应 在这里我们推荐把这个共享的状态提升到距离这些组件最
  • 【react】回调函数形式的ref

    回调函数有3个特点 是我定义的函数 我没有调用这个函数 在我没有调用的情况下这个函数自己执行了 ref绑定一个箭头函数作为回调函数 可以输出以下这段看下 ref绑定的箭头函数是会自己执行的 class Demo extends React
  • react 父组件调用子组件的方法

    子组件中 const child forwardRef props ref gt useImperativeHandle ref gt 这里面的方法是暴露给父组件的 test console log 我是组件里的test方法 test2 t
  • 如何替换对象的key值

    发生的场景 现在用antd组件库 有些组件想渲染数据的话 我要根据他们官网给的字段名称对应起来才能渲染上去 这个是复选框选中 保存的时候 字段需要按照后台约定的传入code value 1 常规循环遍历 大招来了 哈哈哈 才疏学浅 我觉得是
  • React配置@src根路径

    第一种 直接修改node modules包中的webpack config js文件 找到node modules react scripts config webpack config js文件 修改其中alias中的配置 添加 src
  • 黑马React:基础拓展

    黑马React D10 基础拓展 Date December 18 2023 useReducer 基础使用 作用 让 React 管理多个 相对关联 的状态数据 补充 和useState的作用类似 用来管理相对复杂的状态数据 特点 use
  • React中渲染html结构---dangerouslySetInnerHTML

    dangerouslySetInnerHTML 胡子 语法绑定的内容全部作为普通文本渲染 渲染html结构基于 dangerouslySetInnerHTML dangerouslySetInnerHTML 是 React 标签的一个属性
  • React Jsx转换成真实DOM过程?

    面试官 说说React Jsx转换成真实DOM过程 一 是什么 react 通过将组件编写的 JSX 映射到屏幕 以及组件中的状态发生了变化之后 React 会将这些 变化 更新到屏幕上 在前面文章了解中 JSX 通过 babel 最终转化

随机推荐

  • 绝对布局优势_小米价值回归,IoT领域的规模优势和持续投入是关键

    进入2020年 手机行业特别是国内市场的竞争已经接近尾声 作为稳居全球出货量第四的小米而言 国内市场的表现并不令人满意 不过 从去年10月份开始 小米公司的股价却一直呈现出不错的上涨势头 消费者和市场逐渐认可了小米的价值 并且这种认可的趋势
  • leetcode150–逆波兰表达式求值(栈/后缀表达式)

    根据 逆波兰表示法 求表达式的值 有效的算符包括 每个运算对象可以是整数 也可以是另一个逆波兰表达式 说明 整数除法只保留整数部分 给定逆波兰表达式总是有效的 换句话说 表达式总会得出有效数值且不存在除数为 0 的情况 示例 输入 toke
  • 解决执行shell命令时出现argument list too long错误的问题

    如果执行shell命令时出现argument list too long的错误 其原因是需要操作的目标文件过多 比如超过2万个文件 解决方式就是分批甚至逐个处理目标文件 1 grep命令 命令行执行 grep Java l 如果返回 zsh
  • 三角形

    Description 一天mingming问了Flying一个数学问题 给出一个整数 存在多少个直角三角 它的某一条边等于这个整数 而且其它边也是整数 Flying是做ACM的 他就写了个程序解决了这个问题 你也能写个程序解决吗 Inpu
  • 调试设置断点出现:当前不会命中断点还未为文档加载任何符号

    第一种情况 大多数 检查VS的调试模式 VS的调试分为两种 Debug和Release Debug是专门真对检查程序的bug而设置的一种模式 Release模式对程序的编译进行了优化 一般用于程序发布 首先确保是在Debug模式下设置的断点
  • win10安装hdf5,C++读写h5文件测试(一)

    前言 在TensorFlow训练好的数据模型 需要放到C 中使用 也就是将 h5文件中的数据拿出来 读入内存 然后读入图片 用模型数据去预测图像 得出结果 下面按照需求 如何去读取 h5 的数据 进行操作 下载 选择 HDF5 1 8 18
  • 一分钟解决Android调用系统分享给微信,出现分享失败,分享多文件必须为图片格式

    解决Android调用系统分享图片给微信 出现分享失败 分享多文件必须为图片格式 近期应公司需求 分享多图片到微信的功能 之前一直是用微信自己家SDK实现分享 但是查看微信的原生SDK是不具备多图分享的 在网上查找解决办法 直接调用手机系统
  • 提示ModuleNotFoundError: No module named ‘flask‘

    如果你运行 Python 代码时出现了 ModuleNotFoundError No module named flask 的错误提示 这意味着 Python 解释器无法找到 Flask 模块 通常 这个错误是由以下几个原因造成的 Flas
  • 网易云音乐UI界面

    网易云音乐UI界面 接着上期的网易云音乐搜索和下载 现在再添加一个功能 用pyqt5制作一个UI界面 效果展示 主窗口中有个控件 行编辑输入框 搜索按钮 表格 代码 class MyQLabel QLabel 自定义标签 自定义信号 cli
  • IDA调试小技巧

    IDA脚本 MakeNameEX IDA官方链接 实际运用 MakeNameEX MakeNameEx long ea string name long flags SN CHECK ea linear address name new n
  • Harbor使用HTTPS访问

    说明 本脚本只创建密钥 脚本是借鉴所有各个大神 自己重新书写一份 官方的已经写的狠清楚了 直接粘贴过来变一些变量就可以了 如有不对 欢迎指正 binsh Date 2021 6 25 Author Desc Harbor v2 2 1 Th
  • 使用Pycharm快速在字典中添加单引号

    选中要添加单引号的数据 使用Ctrl R快捷键打开Pycharm中的正则表达式 输入 1 2 选中一些配置选项 Match case Regex Search in Selection 点击Replace All即可
  • 【华为OD机试真题 JAVA】欢乐的周末

    JS版 华为OD机试真题 JS 欢乐的周末 标题 欢乐的周末 时间限制 1秒 内存限制 262144K 语言限制 不限 小华和小为是很要好的朋友 他们约定周末一起吃饭 通过手机交流 他们在地图上选择了多个聚餐地点 由于自然地形等原因 部分聚
  • python与C语言socket通信--发送、接收(解析)结构体数据

    from importlib resources import path import socket import struct import ctypes import time os tcp socket socket socket s
  • 利用STM32的FLASH模拟 EEPROM(F103)系列

    STM32的FLASH是用来存储主程序的 ST公司为了节约成本 没有加入 EEPROM 但是许多场合下我们需要用EEPROM 不过FLASH的容量还是可观的 我们可以利用FLASH模拟EEPROM 根据 STM32F10X闪存编程 中的介绍
  • 几十条业务线日志系统如何收集处理?

    在互联网迅猛发展的今天 各大厂发挥十八般武艺的收集用户的各种信息 甚至包括点击的位置 我们也经常发现自己刚搜完一个东西 再打开网页时每个小广告都会出现与之相关联的商品或信息 在感叹智能的同时不惊想 什么时候泄露的行踪 许多公司的业务平台每天
  • 关于Xshell7无法连接虚拟机的解决方案

    当我们在使用Xshell时 无法连接虚拟机 解决方法1 1 打开网络和Internet设置 2 点击更改适配器设置 3 如果发现是禁用则右键启动 解决方法二 1 如果都启动仍然连接不上 我们双击打开后 点击详细信息 发现是自动配置IPv4地
  • AR/MR技术作业

    1 图片识别与建模 环境配置 首先 在官网上注册账号 在Download页面下载相应的SDK安装到unity安装目录获取Vuforia支持 如下 然后 打开Develop页面 点击Get Development Key 然后 注册一个Lic
  • Python3------NumPy学习(一)

    NumPy学习 1 NumPy介绍 Numpy Numerical Python 是一个开源的Python科学计算库 用于快速处理任意维度的数组 Numpy支持常见的数组和矩阵操作 对于同样的数值计算任务 使用Numpy比直接使用Pytho
  • react使用++或者--改变state状态值问题和Useless constructor no-useless-constructor

    写了一个点击事件 点击一下值加一 但是点击事件如下书写无效 并未改变状态值 add this setState likes this state likes 这里应该如下书写 add this setState likes this sta