不渲染

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改变值不重新渲染的问题的更多相关文章

  1. tkinter中scale拖拉改变值控件(十一)

    scale拖拉改变值控件 使用户通过拖拽改变值 简单的实现: import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya. ...

  2. react中,用key值来解决一些奇葩问题

    编辑用户信息,角色信息无法加载到值 改进之后:思路:由于值是设置在state里面的,界面编辑时,会重服务器拉去数据,值也设置在state里面了,但是CheckboxGroup依然不会去渲染选中的值, ...

  3. 6、react中的交互

    1.ajax 再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的 ...

  4. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  5. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  6. react 不能往组件中传入属性的值为 undefined

    在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null ...

  7. React 中的key值

    在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...

  8. ES6-Symbol的用法 ,symbol在对象中的应用,改变值

    ES6-Symbol的用法,,symbol在对象中的应用,改变值 let a = new String; let b = new Number; let c = new Boolean; let d ...

  9. C# list常用的几个操作 改变list中某个元素的值 替换某一段数据

    1.改变list中某个元素的值 public class tb_SensorRecordModel { public int ID { get; set; } public decimal Value ...

随机推荐

  1. C#知识点:操作XML

    XML是什么就不用说了文本标记语言. 主要纪录如何对XML文件进行增删改查. Xml的操作类都存在System.xml命名空间下面. 应用型的直接上代码 using System; using Sys ...

  2. Linux:正则表达式2

    基础正则表达式 ^ : 以xx开头 $ :以xx结尾 ^$ :代表空行 .   任意一个字符 \   :转义符号,让有着特殊意义的字符可被使用 * :重复0个或多个前面的字符,例如 a* 2表示a后面 ...

  3. Linux:基础命令三

    一.软链接 相当于windows中的快捷方式,为了方便用户在使用时更快找到 ln -s /application/appche2.2.0/  /application/appche       注意: ...

  4. Linux:正则表达式1

    正则表达式是以行为单位对字符串进行处理. 1.^ 以xxx开头=>比如在过滤出当前目录下的文件夹.发现文件夹都是以d开头的,那么这个命令就可以这么写 ls -l | grep ^d   过滤出以 ...

  5. Flash 0day(CVE-2018-4878)复现过程

    一.前言介绍 2018年2月1号,Adobe官方发布安全通报(APSA18-01),声明Adobe Flash 28.0.0.137及其之前的版本,存在高危漏洞(CVE-2018-4878). 从Ad ...

  6. jzoj1497. 景点中心

    Description 话说宁波市的中小学生在镇海中学参加计算机程序设计比赛,比赛之余,他们在镇海中学的各个景点参观.镇海中学共有n个景点,每个景点均有若干学生正在参观.这n个景点以自然数1至n编号, ...

  7. 【原创】解BUG-xenomai内核与linux内核时间子系统之间存在漂移

    版权声明:本文为本文为博主原创文章,转载请注明出处.如有问题,欢迎指正.博客地址:https://www.cnblogs.com/wsg1100/ 一.问题起源 何为漂移?举个例子两颗32.768kH ...

  8. python中绝对值的表达式

    abs(x) print(abs(23)) #23print(abs(-45)) #45  

  9. oracle之三目录库和辅助库

    目录库和辅助库 10.1 创建目录库(Catalog database)的必要性 如果没有catalog,RMAN的存储库(元数据)保存在目标库的控制文件里,这样可能存在如下隐患 1)目标库上的控制文 ...

  10. 面试官写了个双冒号: : 问我这是什么语法?Java中有这玩意?

    一:简洁 方法引用分为三种,方法引用通过一对双冒号:: 来表示,方法引用是一种函数式接口的另一种书写方式 静态方法引用,通过类名::静态方法名, 如 Integer::parseInt 实例方法引用, ...