zoukankan      html  css  js  c++  java
  • react数组数据变化后不重新渲染,加了key也没有用?你更新数据的方法错了。

    一般是初学react的同学才会出现这样的问题,虽然不难,却很困扰。
    这是因为数组,是引用,你虽然更新了数组,但是数组的引用地址没有变化,react就不会认为它有变化。所以,只需要在复制的时候,对之前的数组进行深拷贝,再将新的数组set给原来的变量,就ok了。
    附上之前写的深拷贝代码一份。

    export const deepCopyObj = (obj) => { //对象及数组深拷贝
        if (Object.prototype.toString.call(obj) == '[object Object]') {
            var newObj = {};
            for (var key in obj) {
                if (Object.prototype.toString.call(obj[key]) == '[object Object]') {
                    var newChildObj = deepCopyObj(obj[key]);
                    newObj[key] = newChildObj;
                } else {
                    newObj[key] = obj[key];
                }
            }
            return newObj;
        } else if (Object.prototype.toString.call(obj) == '[object Array]') {
            let temp = []
            obj.forEach((item) => {
                let map;
                map = deepCopyObj(item)
                temp.push(map);
            })
            return temp
        } else {
            return obj
        }
    
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    使用就更简单了,

    if (data) {
                   
                    //设置表单的属性
                    let temp = deepCopyObj(data);
                    setProjectList(temp)//这是函数式组件,class组件直接this.setState({list:temp})
                }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    ES6出来解构以后,就更更简单了。。

    state = {
            list : []
        }
        const listTemp = [...this.state.list ] //复制数组
            const index = item.index //修改位置的下标
            this.setState({
                UserList: UserList.map((item, idx) => idx === index ? {...item, fansId: ""} : item)
            })
    漫思
  • 相关阅读:
    Java 嵌套循环之九九乘法表
    Java switch语句第二种用法
    Java switch语句
    Java if-else if-else多选择结构代码
    Java if else双选择结构之计算圆的面积和周长
    Java if单选择结构---掷色子游戏
    在webstorm11中使用nodejs库的智能提示功能
    Node.JS 学习路线图
    Nodejs系列课程,从入门到进阶帮你打通全栈
    使用supervisor提高nodejs调试效率
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/13771939.html
Copyright © 2011-2022 走看看