react 父组件值改变,子组件无变化时,使用深度拷贝可解决

深度拷贝方法:

export default deepCopy (data) {
return JSON.parse(JSON.stringify(data))
}

//问题:做一个全选的功能,全选按钮在父组件,子组件作为列表的项,当父组件选中全选时,将子组件的状态置为选中,反之则为取消选中状态。

全选代码如:
//全选
    selectAll = () => {
        let data = [...this.state.cardData]
        for (let i of data) {
            i.selected = !this.state.selectAll  //是否全选字段,
        }
        data = this.deepCopy(data)  //深度拷贝要重新赋值的列表
        this.setState({
            selectAll: !this.state.selectAll,  //控制是否全选显示状态
            cardData: [...data],   //重新赋值
            dataSource: this.state.dataSource.cloneWithRows(data)
        }, () => {
            
        })
    }

这样就可以触发子组件数据的更新,当父组件数据更新,子组件状态无变化时,可使用深度拷贝数据赋值的方法。

posted @ 2021-07-16 11:43  豆豆是我  阅读(537)  评论(0编辑  收藏  举报