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类组件中,生命周期方法是非常重要的概念,它们允许我们在组件的不同阶段执行代码,这包括在组件挂载、更新以及卸载时执行的生命周期方法,本文通过介绍React类组件中的生命周期方法,旨在帮助开发者深入理解组件的生命周期管理2024-11-11
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop2023-01-01
本文主要介绍了React实现前端选区的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式，而不必显式地通过组件树的逐层传递 props，通过实例代码给大家介绍使用步骤，感兴趣的朋友跟随小编一起看看吧2021-06-06
本篇文章主要介绍了详解react使用react-bootstrap当轮子造车，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-08-08
这篇文章主要为大家介绍了react-router 重新加回跳转拦截功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文主要介绍了react中事件处理与柯里化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了React中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧2022-08-08
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
事件是在编程时系统内发生的动作或者发生的事情，而开发者可以某种方式对事件做出回应，而这里有几个先决条件，这篇文章主要介绍了React合成事件原理解析,需要的朋友可以参考下2022-07-07
最新评论