react纯函数组件setState更新页面不刷新的解决
问题描述：
const [textList, setTextList] = useState(原数组); setTextList(新数组);
当修改原数组时，如果原数组是个深层数组（不只一层），使用setTextList修改时，不会触发页面刷新
原因分析：
这个涉及到可变对象he不可变对象的知识，在vue和react中，如果更新可变对象时，可能会引起视图更新，这是因为，vue和react默认都是浅监听，只会监听数据的第一层，内层数据发生改变，并不会监听到。
解决方案：
这里我的解决方案是，先将原数组深拷贝，赋值给新数组，再修改新数组，将修改后的新数组传递进去，这样就会引起视图更新。
var lists = textList.concat(); lists.splice(index, 1); setTextList(lists);
补：react中，hooks钩子时useState更新不渲染组件的问题
当使用react，写如图组件时，发现一个很关键的问题，当选择用class写的时候，很容易通过组件更新渲染。
当我决定用函数式组件hooks来重构我的组件的时候，发现了一个很难搞的问题，当我通过onChange去改变父组件value的时候，value的值改了，竟然没有重新渲染组件？？？？
一脸懵逼的我，于是试图将class组件时先将value设为空再赋值-----失败了
于是试图通过钩子的生命周期看了一遍。。。。------失败了
还是百度吧------发现了同样的问题。。。发现用只要再后面加slice()
于是本着先解决问题的态度，将图中红圈位置改为了onChange(value.slice())
-----于是，解决了这个神奇的问题。
现在问题解决了，回过头来看看到底怎么回事。。。
查看文档发现一句话useState里数据务必为immutable （不可赋值的对象）
也就是ass component的state也提倡使用immutable数据，但不是强制的，因为只要调用了setState就会触发更新。所以再class组件中没有出现这种问题，或者通过改变为空再赋值是可以触发更新的。
但是再使用useState时，如果在更新函数里传入同一个对象时将无法触发更新。
于是解决思路就是通过slice() 返回一个新的对象去赋值是解决问题的关键。。。。
以上就是react纯函数组件setState更新页面不刷新的解决的详细内容，更多关于react useState页面不刷新的资料请关注脚本之家其它相关文章！
相关文章
ReactQuery系列React Query 实践示例详解
这篇文章主要为大家介绍了ReactQuery系列React Query 实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了react(含hooks)中同步获取state值的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
react-router-dom入门使用教程(路由的模糊匹配与严格匹配)
这篇文章主要介绍了react-router-dom入门使用教程,主要介绍路由的模糊匹配与严格匹配，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
React如何使用create-react-app创建react项目
这篇文章主要介绍了React如何使用create-react-app创建react项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
Shopee在React Native 架构方面的探索及发展历程
这篇文章主要介绍了Shopee在React Native 架构方面的探索,本文会从发展历史、架构模型、系统设计、迁移方案四个方向逐一介绍我们如何一步步地满足多团队在复杂业务中的开发需求，需要的朋友可以参考下2022-07-07
这篇文章主要给大家介绍了关于react中hook及使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式,本文将从React和Vue的组件更新原理入手,剖析两者虚拟DOM difer算法的异同点,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论