一般是初学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)
})