react使用useState修改对象或者数组的值无法改变视图的问题
使用useState修改对象或者数组的值无法改变视图
在react中使用useState无法改变视图,数据改变但是视图未改变
未渲染的代码如下:
const [needLists,setNeedLists]=useState([]) const pressDownEnter=(e)=>{ if(e.keyCode===13){ needLists.push({ content:e.target.value, status:0 }) setNeedLists(needLists) e.target.value="" } }
未发生改变的原因可能是因为needLists本身并没有变化,因为needLists变量存储的地址是不变的
解决办法
通过数据结构让传入的新值和原来的数组指向的不是同一片内存,就能触发dom的更新
const [needLists,setNeedLists]=useState([]) const pressDownEnter=(e)=>{ if(e.keyCode===13){ needLists.push({ content:e.target.value, status:0 }) setNeedLists([...needLists]) e.target.value="" } }
对于对象的修改也是同理可以通过{…obj}
关于useState使用及注意事项
一、基本使用
useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下:
const [count, setCount] = useState(initialCount)
它返回一个状态和一个修改状态的方法,状态需要通过这个方法来进行修改;initialCount 是我们传入的一个初始状态,它是惰性的,我们可以通过传一个函数来返回一个值当作初始状态,并且这个函数只会在初始渲染时执行一次;
const [count, setCount] = useState(() => { const initialCount = someExpensiveComputation(); return initialCount })
接下来把定义好的状态运用到页面:
import { useState } from 'react' function App() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) // 传入一个函数,更新的值是基于之前的值来执行 // setCount(count => count + 1) } return ( <div> <h4>count: {count}</h4> <button onClick={ handleClick }>点击更新状态</button> </div> ) }
页面渲染完成后,我们可以看到 count的值是 0,当我们点击按钮时,会将 count的值加 1,页面也同时更新;
了解完基础用法后,我们可以思考几个问题;
- setCount修改值时它是同步还是异步?
- 连续调用 setCount会发生什么?
第一个问题:setCount修改值时它是同步还是异步?
const handleClick = () => { console.log("value1: ", count) setCount(count => count + 1) console.log("value2: ", count) }
从图中我们可以看出,页面的值是更新了,但是控制台打印的是之前的值,这是不是也表示 setCount是异步的呢?我们换一种方法,用异步来修改状态;
const handleClick = () => { console.log("value1: ", count) setTimeout(() => { setCount(count => count + 1) console.log("value2: ", count) }, 0) }
显然,异步修改状态跟同步修改状态的结果是一致的,这也表明了 setCount 是异步更新的;那我们要怎么拿到更新后的值呢,我们可以用另外一个 hook 函数 useRef,代码如下:
function App() { const [count, setCount] = useState(0) const countRef = useRef(count) countRef.current = count const handleClick = () => { setCount(count => count + 1) console.log("value3: ", count) setTimeout(() => { console.log(countRef.current) }, 0) } return ( <div> <h4>count: {count}</h4> <button onClick={handleClick}>点击更新状态</button> </div> ) }
从图中我们可以看出,我们已经拿到了更新之后的值,useRef不仅可以用于访问 DOM 节点,也可以用来表示一个容器,current属性可以保存任何值,而且useRef返回的对象会在整个生命周期内保持;
第二个问题:连续调用 setCount会发生什么?
(1)传入一个基于状态的值
const handleClick = () => { console.log("value1: ", count) setCount(count + 1) console.log("value2: ", count) setCount(count + 1) console.log("value3: ", count) }
从图片可以看出,如果我们传入的是一个普通值,他只会进行最后一次更新;
(2)传入一个函数
const handleClick = () => { console.log("value1: ", count) setCount(count => count + 1) console.log("value2: ", count) setCount(count => count + 1) console.log("value3: ", count) }
可以看出,传入一个函数的话,它会进行两次赋值,因为它更新的值是基于之前的值来执行,所以在开发中推荐使用函数传入的形式进行修改;
二、注意事项
1、复杂变量的修改
对于复杂类型的变量我们修改时需要重新定义,在原来数据的基础上修改不会引起组件的重新渲染,因为 React 组件的更新机制只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;举个例子
function App() { const [arr, setArr] = useState([1]) const pushData = () => { arr.push(4) setArr(arr) } return ( <div> <h4>{arr.join("-")}</h4> <button onClick={pushData}>点击添加数组</button> </div> ) }
上面的代码在点击按钮时,视图不会发生变化,但是 arr的值是变化了,如果想修改这个数组,需要重新定义一个数组来修改,在原数组上的修改不会引起组件的重新渲染,React 组件的更新机制对只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;
const pushData = () => { setArr([...arr, 4]) }
2、异步操作获取更新的值
在类组件里面,修改值时异步操作可以拿到更新后的值,但是在函数组件,异步获取是拿不到更新后的值的,举个例子对比一下:
类组件
class App extends React.Component { constructor() { super() this.state = { count: 0 } } handleClick = () => { this.setState({ count: this.state.count + 1 }) console.log(this.state.count) setTimeout(() => { console.log(this.state.count) }) } render() { return ( <> <h4>count: {this.state.count}</h4> <button onClick={this.handleClick}>点击更新状态</button> </> ); } }
函数组件
function App() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count => count + 1) console.log("value1: ", count) setTimeout(() => { console.log("value2: ", count) }) } return ( <div> <h4>count: {count}</h4> <button onClick={handleClick}>点击更新状态</button> </div> ) }
显然,在函数组件中是不能通过异步来获取更新的值,我们可以通过 useRef来获取;
const countRef = useRef(count) countRef.current = count const handleClick = () => { setCount(count => count + 1) console.log("value1: ", countRef.current) setTimeout(() => { console.log("value2: ", countRef.current) }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/coucouxie/article/details/119148545
相关文章
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
- 这篇文章主要介绍了java8如何用Stream查List对象某属性是否有重复的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 这篇文章主要介绍了R语言删除指定变量或对象的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25
- 这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25
- 下面一段代码给大家介绍php curl模拟post请求的示例代码,具体代码如下: <?php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12如何在Spring WebFlux的任何地方获取Request对象
这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象,帮助大家更好的理解和使用springboot框架,感兴趣的朋友可以了解下...2021-01-26- 下面小编就为大家带来一篇C# 拷贝数组的几种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求。 要求:从两个不同的表中获取各自的4条数据,然后整合(array_merge)成一个数组,再根据数据的创建时间降序排序取前4条。 遇到这个...2014-06-07
牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作
只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。1...2015-10-30- 这篇文章主要介绍了C#实现字符串转换成字节数组的简单实现方法,仅一行代码即可搞定,非常简单实用,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了c#将字节数组转成易读的字符串的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了C#读取文件所有行到数组的方法,涉及C#针对文件及数组的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 如何将下面的二维数组转为一维数组。复制代码 代码如下:$msg = array( array( 'id'=>'45', 'name'=>'jack' ), array( 'id'=>'34', 'name'=>'mary' ), array( 'id...2014-05-31
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 在php中为我们提供了一个函数var_export 他可以直接将php代码入到一个文件中哦。 代码如下 复制代码 var_export($times,true);后面不加tru...2016-11-25