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);
},
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
react-native 父函数组件调用类子组件的方法(实例详解)
这篇文章主要介绍了react-native 父函数组件调用类子组件的方法,通过详细步骤介绍了React 函数式组件之父组件调用子组件的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了React Context源码实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
React中hook函数与useState及useEffect的使用
这篇文章主要介绍了React中hook函数与useState及useEffect的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
在这篇指南中,我们将探索使用 Google Fonts 在 React Native 应用中添加自定义字体的方法,字体是优秀用户体验的基石,使用定制字体可以为你的应用程序提供独特的身份,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了react项目中使用插件配置路由的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
使用React+SpringBoot开发一个协同编辑的表格文档实现步骤
随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求,本文小编就将为大家介绍如何使用React+SpringBoot简单的开发一个协同编辑的表格文档,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要为大家介绍了React Context 变迁及背后实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React-Hook中使用useEffect清除定时器的实现方法
这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法，还有如何使用他清除定时器，需要的朋友可以参考下2022-11-11
React immer与Redux Toolkit使用教程详解
这篇文章主要介绍了React中immer与Redux Toolkit的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论