程序员经验分享-hwhale

react生命周期componentDidMount中设置setState在esIint报错

2023-11-06

react生命周期componentDidMount中设置setState在esIint报错

项目背景

由于需要在页面渲染出来的时，对state中的数据进行初始化并需要出发render重绘

componentDidMount () {
	 	let { selectedValue, stateValue } = this.state;
	    this.setState({
	      selectedValue,
	      stateValue,
	    });
    }

运行结果

Do not use setState in componentDidMount react/no-did-mount-set-state

这里控制台报了个Waring,提示不要在componentDidMount中使用setState,想了下明白这个意思，componentDidMount 执行是在DOM渲染完成后，在这里面使用setState会触发重绘，打个比方，你明明知道正确的做法，却还是将错误方法执行了一次。。所以正确的使用就在页面第一次render前在constructor或者componentWillMount中把准备工作做好，推荐使用constructor。

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

React

setState

生命周期

react生命周期componentDidMount中设置setState在esIint报错 的相关文章

  • 【React】路由（详解）

    目录 单页应用程序 SPA 路由 前端路由 后端路由 路由的基本使用 使用步骤 常用组件说明 BrowserRouter和HashRouter的区别 路由的执行过程 默认路由 精确匹配 Switch的使用 重定向路由 嵌套路由 向路由组件传

  • 对 React Hook的闭包陷阱的理解，有哪些解决方案？

    hooks中 奇怪 其实符合逻辑 的 闭包陷阱 的场景 同时 在许多 react hooks 的文章里 也能看到 useRef 的身影 那么为什么使用 useRef 又能摆脱 这个 闭包陷阱 搞清楚这些问题 将能较大的提升对 react h

  • 配置使用Eslint的时候 版本错误 "eslint": "5.6.0" a different version of eslint was detected higher up in the tr

    1 如果你也遇到下面的问题 你可以 按照命令行提示的那样 下面这四步完成的一般就可以了 但是不排除你在运行的时候忘记下载某些依赖 1 删除 package lock json 不是package json 你可以选择 yarn lock 或

  • react 使用 scss

    react 使用 scss 日常记录开发中遇到的坑 1 使用 npm install sass loader node sass S 进行安装 2 在页面中直接使用 有时候可以 有时候不行 原因 我个人觉得安装的两个插件本版兼容问题 nod

  • React页面设计初体验

    1 定制路由 export default login path login name login component layouts BlankLayout routes path login component Login Index

  • 关于Vue.js和React.js，听听国外的开发者怎么说？

    VueJS 与 ReactJS 到底怎么样如何 听听别人怎么说 使用所有新的库和框架 很难跟上所有这些库和框架 也就是说 这就需要您决定哪些是值得花时间的 让我们看看人们说什么 和Vue JS一起工作是很愉快的 我发现学习曲线很浅 然而 这

  • React中使用if else 条件判断

    在react中用jsx渲染dom的时候经常会遇到if条件判断 然而在jsx中竟是不允许if条件判断的 以下有几种判断方式 可以根据自己的应用场景 挑选适合的 方案一 class HelloMessage extends React Comp

  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a

  • React核心概念：状态提升

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

  • umi 后台管理demo

    umi 后台管理demo umi react ts dva antd egg 有待优化 简单的前后端管理demo 接口提供增删查改 前端也有相应功能 github代码 https github com huiBuiling ql admin

  • React、Vue2.x、Vue3.0的diff算法

    前言 本文章不讲解 vDom 实现 mount 挂载 以及 render 函数 只讨论三种 diff 算法 VNode 类型不考虑 component functional component Fragment Teleport 只考虑 E

  • React class组件、react-hook函数组件分别实现五子棋

    react class类组件 react hook函数组件分别实现五子棋 前言 使用create react app脚手架简单搭建 不用安装其他依赖 纯 js css实现 这里就只是简单的说明目录结构和思路 具体的代码实现请转到 Githu

  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件

  • React配置@src根路径

    第一种 直接修改node modules包中的webpack config js文件 找到node modules react scripts config webpack config js文件 修改其中alias中的配置 添加 src

  • 在现有状态转换期间无法更新

    当我加载流星项目时 我的浏览器不断崩溃 如果我注释掉 我只能避免浏览器崩溃this setState input 36 currentApp input 36 在 App jsx 文件中 有人可以告诉我如何修复我的代码 以便项目可以加载而不

  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参

  • React中渲染html结构---dangerouslySetInnerHTML

    dangerouslySetInnerHTML 胡子 语法绑定的内容全部作为普通文本渲染 渲染html结构基于 dangerouslySetInnerHTML dangerouslySetInnerHTML 是 React 标签的一个属性

  • this.setState 在 React 中返回 Promise

    我做了我的componentWillMount 异步 现在我可以使用await与setState 这是示例代码 componentWillMount async gt const fetchRooms this props await th

  • React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

    React安装依赖 node modules中有下载依赖项但package json文件中没有依赖 直接在下载依赖项后 加 S 就可以解决 随机 id 生成器 uuid nanoid npm install nanoid S S save

  • 在构建期间调用 setState()，无需用户交互

    我做了什么 我已将 FCM Firebase 云消息传递 集成到我的 flutter 应用程序中 我分享了context和setState 每个页面的静态变量中的这两行在我的页面的所有构建函数中被调用 override Widget bui

随机推荐

  • leetCode热题52-57 解题代码，调试代码和思路

    前言 本文属于特定的六道题目题解和调试代码 1 剑指 Offer 22 链表中倒数第k个节点 Easy 2022 09 01 91 2 76 最小覆盖子串 Hard 2023 03 27 82 3 165 比较版本号 Medium 2023

  • Me and My Girlfriend靶机渗透

    背景描述 这个VM告诉我们 有一对恋人 即Alice和Bob 这对夫妻本来很浪漫 但是自从Alice在一家私人公司 Ceban Corp 工作以来 爱丽丝对鲍勃的态度发生了一些变化是 隐藏的 而鲍勃 Bob 寻求您的帮助 以获取爱丽丝 Al

  • Python 第四章 字典：当索引不好用时

    字典 是Python中唯一内建的映射数据结构类型 这里的映射是指通过名字引用值 字典中的值并没有特殊的顺序 值都是存储在一个特定的键里 键可以是数字 字符串甚至是元祖 什么是键 什么是值 怎么映射呢 请继续看下去 创建和使用字典 下面来创建

  • ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序

    运行 npm run serve 报以下错误 首先检查一下文件中是否有node modules文件夹 如果没有则执行以下代码 npm install 其中可能会有很多警告 不用搭理 如果文件中已经有node modules文件夹 那么先把n

  • 接口自动化测试总结

    前言 本文是我在公司总结的一点点个人建议 可能有非常多的遗漏 先记录下来这时候我的理解 公司是做共享单车业务的 所以场景基本上也可以复用 毕竟大家都骑过单车 注明 code是我司接口返回的标志 编写之前 接口相关 这块总结不全 了解接口的功

  • 【Springboot WebSocket STOMP使用 2】STOMP使用@SendToUser实现用户个人请求-响应

    背景 STOMP协议的模型是 订阅 发布 式的 所以一般场景是同一个主题的广播 而有些场景下用户既想保持当前的WebSocket Session复用 又想消息的响应只有我自己能收到 指定其他某一个用户也行 不过得用其他api方法 不需要别人

  • 九月十月百度人搜，阿里巴巴，腾讯华为笔试面试八十题(第331-410题)

    九月十月百度人搜 阿里巴巴 腾讯华为小米搜狗笔试面试八十题 引言 自发表上一篇文章至今 事实上 上篇文章更新了近3个月之久 blog已经停了3个多月 而在那之前 自开博以来的21个月每月都不曾断过 正如上一篇文章支持向量机通俗导论 理解SV

  • 嵌入式Linux下使用OpenCV

    By Toradex 秦海 1 简介 OpenCV的全称是Open Source Computer Vision Library 是一个跨平台的计算机视觉库 OpenCV是由英特尔公司发起并参与开发 以BSD许可证授权发行 可以在商业和研究

  • 机器学习之实战matlab神经网络工具箱

    上节在 机器学习之从logistic到神经网络算法 中 我们已经从原理上介绍了神经网络算法的来源与构造 并编程实战了简单神经网络对于线性与非线性数据的分类测试实验 看过上节的可能会发现 上节实现的算法对于非线性数据的分类效果并不是非常完美

  • Java并发编程系列8 - 多线程实战

    主要基于小米最近的多线程项目 抽离出里面的多线程实例 前言 Java多线程的学习 也有大半个月了 从开始学习Java多线程时 就给自己定了一个小目标 希望能写一个多线程的Demo 今天主要是兑现这个小目标 这个多线程的示例 其实是结合最近小

  • JVM_09 类加载与字节码技术(字节码指令2)

    1 条件判断指令 几点说明 byte short char 都会按 int 比较 因为操作数栈都是 4 字节 goto 用来进行跳转到指定行号的字节码 源码 public class Demo3 3 public static void m

  • ES 的聚合机制和模糊匹配

    一 Elasticsearch对于大数据量 上亿量级 的聚合如何实现 Elasticsearch 提供的首个近似聚合是cardinality 度量 它提供一个字段的基数 即该字段的distinct或者unique值的数目 它是基于HLL算法

  • node.js入门学习

    文章目录 一 第一个node js应用 二 node js文件系统 1 读取文件 2 写入文件 三 node js模块化 新建一个module1 js文件 在require js文件中引入module1 js文件 四 node js发起GE

  • 参考文献期刊首字大写_sci论文参考文献格式

    学术论文的写作都离不开参考文献的引用与借鉴 参考文献的引用与借鉴可以让我们的文章更具可读性 也更具权威性与科学性 所以学术界对参考文献的引用有着明确的格式要求 凡是引用他人的文献都要在文章中做相应标注 这对原作者来说也是一种权利的保护 参考

  • 【OLED驱动】：stm32F103的四线模拟IIC驱动的0.96寸OLED屏幕显示数字，字母，汉字，图片的例程

    文章目录 前言 一 四线OLED是什么 二 IIC原理 1 四线0 96寸OLED是IIC驱动来实现显示 2 IIC协议的OLED屏幕 3 STM32驱动代码 4 IIC使用代码 总结 前言 最近在做一个开源方案 平衡车 即将开源硬件和软件

  • C++报错不允许使用不完整的类型

    include pch h include

  • #define _CRT_SECURE_NO_WARNINGS 1问题

    文章目录 前言 一 为什么用了scanf strcyp strlen strcat等函数会报错 二 操作步骤 1 下载notepad 2 修改 总结 前言 当我们的代码出现这样的报错时 不要慌张 应该是你用了scanf strcyp str

  • Merkle Tree（默克尔树）算法解析

    Merkle Tree 默克尔树 算法解析 1 Merkle Tree概念 Merkle Tree 通常也被称作Hash Tree 顾名思义 就是存储hash值的一棵树 Merkle树的叶子是数据块 例如 文件或者文件的集合 的hash值

  • 记一次jvm项目调优

    问题描述 运维一直说 fy core 项目这个项目每天都会发生多次full gc full gc 会停顿600ms左右 理论上生产环境不允许发生full gc 所以决定把full gc都优化掉 以下是该grafana对应的资源表现 可以看出

  • react生命周期componentDidMount中设置setState在esIint报错

    react生命周期componentDidMount中设置setState在esIint报错 项目背景 由于需要在页面渲染出来的时 对state中的数据进行初始化并需要出发render重绘 componentDidMount let sel

热门标签