React使用setState后页面没有更新

if(res.status===200){
                res.data.key = this.state.defaultcardNum
                let newArr = this.state.dataSource
                newArr.splice(this.state.defaultcardNum,1,res.data)
                this.setState({
                    dataSource:newArr
                },()=>{
                    this.setState({
                        visibleup: false,
                    })
                })
            }

上面代码可能导致页面的 dataSource 不会更新。

原因:因为react的监听是浅监听,只会监听数据第一层的变化,内层发生变化是监听不到的,当使用赋值(=)的时候相当于直接更改了数组对应的内存块,但react内部用于对比的array的内存并没有更改,是指向同一个内存的,因为没有触发render。

解决方法

if(res.status===200){
                res.data.key = this.state.defaultcardNum
                let newArr = JSON.parse(JSON.stringify(this.state.dataSource))
                newArr.splice(this.state.defaultcardNum,1,res.data)
                this.setState({
                    dataSource:newArr
                },()=>{
                    this.setState({
                        visibleup: false,
                    })
                })
            }

使用JSON.parse(JSON.stringify(this.state.dataSource))深拷贝赋值

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...