在React中同时使用ref操作DOM与setState常常会遇到

比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致。导致这样的原因是setState函数是异步函数。

就是当ref的操作执行结束后,可能setState函数才执行。

解决方案:

将有关ref操作的放在setState函数的回调函数里。代码示例:

    handleBtnClick(){
//不能用this,因为此时this指向它绑定的按钮,并且不能直接用这个this.state,永远不要直接修改this.state
// this.state.list.push('hello world');
this.setState((prevState)=>({
// ...为展开运算符
list:[...prevState.list,prevState.inputValue],
inputValue:''
}),()=>{
console.log(this.ul.querySelectorAll('div').length);
// 回调函数
})
// 注意setState为异步函数,相当于console执行后等一会setState才执行
}

  如代码所示,console.log的位置就是回调函数的位置,该回调函数在setState执行完毕后才执行

【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题的更多相关文章

  1. 【React自制全家桶】六、React性能优化(持续更新总结)

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  2. 【React自制全家桶】四、React中state与props的分析与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  3. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  4. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  5. 【React自制全家桶】九、Redux入手

    一.React项目中为什么要用Redux 上图: 左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就 ...

  6. 【React自制全家桶】八、React动画以及react-transition-group动画库的使用

    React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...

  7. 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...

  8. 【React自制全家桶】五、React组件的生命周期函数详解

    一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...

  9. vue全家桶和react全家桶

    vue全家桶:vue  +  vuex (状态管理)  + vue-router (路由) + vue-resource +axios +elementui react全家桶 : react + re ...

随机推荐

  1. 关于api接口以及页面数据通信域名,缓存cdn设置优化

    以B站为例: 主域名:www.bilibili.com 账户登录注册相关域名,包括app登录:passport.bilibili.com 静态资源css,js,img等相关域名:static.bili ...

  2. 2019-2020-1 20199319《Linux内核原理与分析》第一周作业

    一.Linux系统简介 通过实验一了解了Linux 的历史,Linux与windows之间的区别以及学习Linux的方法.因为一直用的都是windows系统,习惯了图形界面,而Linux是通过输入命令 ...

  3. BaseAdapter的使用与优化

    1.逗比式 //逗比式............................................ //加载布局文件 //将xml文件转化为view,获取到view//由于我们只需要将XM ...

  4. The Tower HDU - 6559 (解析几何)

    The Tower HDU - 6559 The Tower shows a tall tower perched on the top of a rocky mountain. Lightning ...

  5. golang 系列学习(-) 数据类型

    数据类型的出现 在的编程语言中,数据类型用于声明函数和变量,数据类型的出现是为了要把数据分成数据所需要内存大小的不同数据,编程时需要什么样的内存就申请什么样的内存.就可以充分的利用内存,更好的霸控程序 ...

  6. linux 发送 post 请求

    curl -H "Content-type: application/json" -X POST -d '{"accoId":"IDAP_000000 ...

  7. linux高级技巧:heartbeat+lvs

    linux高级技巧:heartbeat+lvs   Heartbeat 项目是 Linux-HA 工程的一个组成部分,它实现了一个高可用集群系统.心跳服务和集群通信是高可用集群的两个关键组件,在 He ...

  8. js数据持久化本地数据存储-JSON.parse和JSON.stringify的区别

    JSON.stringify()的作用是将 JavaScript 值转换为 JSON 字符串, 而JSON.parse()可以将JSON字符串转为一个对象. 简单点说,它们的作用是相对的,我用JSON ...

  9. WCF错误:由于目标计算机积极拒绝,无法连接;127.0.0.1:3456

    问题描述 最近Windows打完补丁,原来部署在本机的WCF无法连接:出现如下WCF错误:由于目标计算机积极拒绝,无法连接:127.0.0.1:3456 解决方案 检查一下本机的服务:NetTcpAc ...

  10. CodeForces 778B - Bitwise Formula

    题意: 选择一个 m 位的二进制数字,总分为 n 个算式的答案之和.问得到最低分和最高分分别应该取哪个二进制数字 分析: 因为所有数字都是m位的,高位的权重大于低位 ,我们就从高到低考虑 ans 的每 ...