react hook使用useState更新数组,无法更新问题及解决
更新时间：2024年03月13日 10:11:19 作者：on_风而
这篇文章主要介绍了react hook使用useState更新数组,无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
const [textList, setTextList] = useState(原数组); setTextList(新数组);
当修改原数组时，如果原数组是个深层数组，使用setTextList修改时，不会触发页面刷新
原因分析
这个涉及到可变对象和不可变对象的知识，
在vue和react中，如果更新可变对象时，可能会引起视图更新，
这是因为，vue和react默认都是浅监听，只会监听数据的第一层，
如果数据是引用类型，内层数据发生改变，并不会监听到。
解决方法
这里应该先将原数组浅拷贝，赋值给新数组，再修改新数组（不影响原状态）
将修改后的新数组使用setValue传递进去，这样就会引起视图更新
const [value, setValue] = useState(initialArray);
return{
//item是个数组
add: (item: T) => setValue([...value, item]),
removeIndex: (index: number) => {
// 把value copy一遍，解构一遍，再把结构的值为了生成新的数组，相当于浅拷贝，这样才能触发更新数据
const copy = [...value];
copy.splice(index, 1);
setValue(copy);
},
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了react+ts实现简单jira项目，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了React的三大属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
本篇文章主要介绍了如何在react中搭建d3力导向图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
深入理解React Native原生模块与JS模块通信的几种方式
本篇文章主要介绍了深入理解React Native原生模块与JS模块通信的几种方式，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了React之配置多个代理实现数据请求返回问题，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章我们将详细讲解如何建立一个这样简单的列表,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了hooks中useEffect()使用总结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论