用React 中的useState改变值不重新渲染的问题
不渲染
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根据删除index下标的这一项
setLists([arr]); //重复设置要改变数组的地址
解决办法:
const [lists,setLists] =useState([]);
.....
const arr = lists;
arr.splice(index,1) //根据删除index下标的这一项
setLists([...arr]); //重复赋值要改变数组的地址
react中数组如果引用地址不变,是不触发重新渲染的,但是值是设置进去了
或者
const [lists,setLists] =useState([]);
.....
const arr = [...lists]; //克隆的时候改变地址
arr.splice(index,1)
setLists(arr);
这里要根据react的渲染机制源码,因为react 会判断旧状态和新状态是否有变化,如果没有变化就不渲染,所以要改变地址告诉render 是新状态要重新渲染
用React 中的useState改变值不重新渲染的问题的更多相关文章
- tkinter中scale拖拉改变值控件(十一)
scale拖拉改变值控件 使用户通过拖拽改变值 简单的实现: import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya. ...
- react中,用key值来解决一些奇葩问题
编辑用户信息,角色信息无法加载到值 改进之后:思路:由于值是设置在state里面的,界面编辑时,会重服务器拉去数据,值也设置在state里面了,但是CheckboxGroup依然不会去渲染选中的值, ...
- 6、react中的交互
1.ajax 再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的 ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- react 不能往组件中传入属性的值为 undefined
在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null ...
- React 中的key值
在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...
- ES6-Symbol的用法 ,symbol在对象中的应用,改变值
ES6-Symbol的用法,,symbol在对象中的应用,改变值 let a = new String; let b = new Number; let c = new Boolean; let d ...
- C# list常用的几个操作 改变list中某个元素的值 替换某一段数据
1.改变list中某个元素的值 public class tb_SensorRecordModel { public int ID { get; set; } public decimal Value ...
随机推荐
- 网址中的静态资源 public
客户端浏览器收到的HTML响应内容中如果带有 link img script video audio 等带有src或者href标签时候,这些都是外部链接资源请求url.浏览器会默认自动性的对这些资源 ...
- Codeforces Round #669 (Div. 2)A-C题解
A. Ahahahahahahahaha 题目:http://codeforces.com/contest/1407/problem/A 题解:最多进行n/2的操作次数,我们统计这n个数中1的个数,是 ...
- Jenkins下Vue自动部署(一)
1,服务器上安装docker http://www.runoob.com/docker/ubuntu-docker-install.html?tdsourcetag=s_pctim_aiomsg 2, ...
- vue父子传值与非父子传值
大概梳理下传值的几种方式 一:父子组件传值 props方式 子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化,父组件接收子组件传递来的值:子组件接收父组件传递来的值,并根据传递来的值在子组件 ...
- Blocks(POJ 3734)
原题如下: Blocks Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8020 Accepted: 3905 Desc ...
- Linux下find与exec的联手干大事
在Linux下工作,find命令绝对是一个非常高频的命令.我们可以用find命令来找到符合某些关键词的文件,找到某些日期的文件,也可以设定一些正则表达式,找到一系列满足该条件的文件. 但是,如果只有一 ...
- flutter权限管理permission_handler
flutter权限管理permission_handler 添加依赖 #权限 permission_handler: ^3.0.0 使用 在android的mainfest中添加权限: <use ...
- docker自己部署一个项目
老祖宗的话说得好呀:实践出真知 自己打个简单的镜像运行 遇到了一堆破问题 学习docker主要在菜鸟教程 https://www.runoob.com/docker/docker-containe ...
- @Embedded 和 @Embeddable
自定义类型在hibernate中实现自定义类型,需要去实现UserType接口即可或者以Component的形式提供. JPA的@Embedded注解有点类似,通过此注解可以在Entity模型中使用一 ...
- 解释器与JIT编译器
解释器 JVM设计者们的初衷仅仅只是单纯地为了满足Java程序实现跨平台特性,因此避免采用静态编译的方式直接生成本地机器指令,从而诞生了实现解释器在运行时采用逐行解释字节码执行程序的想法. 解释器真正 ...