问题描述：

const [textList, setTextList] = useState(原数组);
setTextList(新数组);

当修改原数组时，如果原数组是个深层数组（不只一层），使用setTextList修改时，不会触发页面刷新

原因分析：

这个涉及到可变对象he不可变对象的知识，在vue和react中，如果更新可变对象时，可能会引起视图更新，这是因为，vue和react默认都是浅监听，只会监听数据的第一层，内层数据发生改变，并不会监听到。

解决方案：

这里我的解决方案是，先将原数组深拷贝，赋值给新数组，再修改新数组，将修改后的新数组传递进去，这样就会引起视图更新。

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

react纯函数组件useState更新页面不刷新相关推荐

一文带你了解React 纯函数组件
1. 纯函数所谓纯函数,它是这样一种函数:即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用. 从纯函数的定义,可以提取出纯函数的必要条件: 纯函数接受参数,基于参数计算,返回一个新对象 ...
从一个表格render方法问题看React函数组件的更新
从一个表格render方法问题看React函数组件的更新最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下,从这个现象我们能很清楚的看到函数组件的更新的特点,以及我们应该如何去理解和 ...
react+hook函数组件实现表单添加数据，表格展现
效果图: 目录结构:(目分为主页面BookTable,以及两个组件,表格组件和添加书籍组件) 主页面:主要是将两个组件引入进页面,并将添加书籍事件.删除书籍事件传递给子组件,由子组件触发. impor ...
nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题
组件复用会在两种情况下发生: 1.使用 keep-alive 时,页面再次跳转时,数据不更新每一次路由的切换都会导致页面被重新渲染,无论是各种钩子还是异步获取数据函数都会被执行,为了提高网站性能,可 ...
react之纯函数、函数组件
纯函数 Pure Function 定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数. 特点 1. 函数的返回结果只依赖于它的参数. let foo=( ...
React Ways1——函数即组件
未经审视的代码是不值得写的 -- 沃兹吉硕德 React 中有一个经典的公式: const View = f(data) 复制代码从这个公式里我们可以提取出两个特点: 视图由函数定义--函数即组 ...
你不知道的JS专栏 - 避免bug利器纯函数
你不知道的JS专栏 - 避免bug利器纯函数目录: 纯函数的概念及基本认识纯函数在实际开发中的使用案例纯函数在框架中的使用, 以及框架中的纯函数思想纯函数的概念及基本认识纯函数定义 - 不依 ...
react hook函数
State Hook useState():状态钩子.纯函数组件没有状态,用于为函数组件引入state状态, 并进行状态数据的读写操作语法.参数及返回值说明:: const [xxx, setXxx ...
react18 函数组件学习笔记
react学习笔记 react 安装渲染DOM 使用Portal(可以将组件渲染到页面指定位置) 使用方法 CSS_Modal(外部样式表) 使用方式 Fragment (根元素) 使用方式 con ...

react纯函数组件useState更新页面不刷新

问题描述：

原因分析：

解决方案：

react纯函数组件useState更新页面不刷新相关推荐

最新文章

热门文章