问题描述：

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() 返回一个新的对象去赋值是解决问题的关键。。。。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS中隐藏html标签怎么做，方法是什么

  方法：1、利用“document.getElementById("id")”语句根据id值获取指定的html标签元素对象；2、利用“标签元素对象.style.display="none";”语句将获取到的html标签元素隐藏即可。

• 用vue实现关闭弹窗后自动刷新的方法是什么

  目录关闭对话框后刷新列表父窗口代码子窗口代码关闭打开的窗口后刷新父页面解决办法关闭对话框后刷新列表有些场景需要实现用户弹窗确定后自动刷新列表，父窗口绑定fevent即可父窗口代码template     div el-button @click=$refs.editform.dialogFormVisible = tr

• jQuery怎样删除子元素，需要使用什么方法？

  这篇文章我们来了解jQuery怎样删除子元素的相关内容，在删除子元素之前，首先我们需要先获取子元素，这里需要使用children()方法来获取子元素对象，然后再用remove()方法就能删除子元素了，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• JavaScript原型链学习有哪些知识要掌握

  这篇文要给大家介绍的是JavaScript原型链，文章主要介绍内容有构造函数、属性Prototype、属性Prototype、属性__proto__、访问原型上的方法等问题,需要的朋友可以参考一下文章的详细内容

• vue全局引入scss的方法是什么，有何要点需要注意

  本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss，也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下