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);
    },
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Ant Design与Ant Design pro入门使用教程
Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用,这篇文章主要介绍了Ant Design与Ant Design pro入门,需要的朋友可以参考下
2023-12-12
React styled components样式组件化使用流程
styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化
2023-02-02
react基于Ant Desgin Upload实现导入导出
本文主要介绍了react基于Ant Desgin Upload实现导入导出,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
react 页面加载完成后自动执行标签的点击事件的两种操作方法
这篇文章主要介绍了react 页面加载完成后自动执行标签的点击事件,本文给大家分享两种操作方法结合示例代码给大家讲解的非常详细，需要的朋友可以参考下
2022-12-12
react Table准备Spin Empty ConfigProvider组件实现
这篇文章主要为大家介绍了react Table准备Spin、Empty、ConfigProvider组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-02-02
react如何实现表格多条件搜索
这篇文章主要介绍了react如何实现表格多条件搜索问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react18 hooks自定义移动端Popup弹窗组件RcPop
这篇文章主要介绍了react18 hooks自定义移动端Popup弹窗组件RcPop,react-popup 基于react18+hook自定义多功能弹框组件,整合了msg/alert/dialog/toast及android/ios弹窗效果,需要的朋友可以参考下
2023-08-08
React从命令式编程到声明式编程的原理解析
这篇文章主要介绍了React从命令式编程到声明式编程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
react-redux及redux状态管理工具使用详解
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下
2023-01-01
使用Jenkins部署React项目的方法步骤
这篇文章主要介绍了使用Jenkins部署React项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03