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))深拷贝赋值

但JSON.parse(JSON.stringify())在特定情况下坑比较多。

第二种解决办法

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

用...浅拷贝也能解决。