- 修改object中某项
this.setState({
object: {...object, key: value}
});
- 删除数组首位
array.splice(0, 1);
this.setState({
array
});
- 删除数组尾部
array.splice(array.length - 1);
this.setState({
array
});
- 删除数组任意一项
array.splice(index, 1);
this.setState({
array
});
- 数组尾部添加一项
this.setState({
array: [...array, item]
});
- 数组头部添加一项
this.setState({
array: [item, ...array]
});
- 数组任意位置添加一项
array.splice(index, 0, item);
this.setState({
array
});
- 修改数组中任意一项中值
function updateArrayItem(index, key, value) {
this.setState({
array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
});
}
- 复杂类型修改
this.setState(prevState => return newState);
返回一个新的state对象,可以修改最复杂的state,一般不建议使用
React中setState修改深层对象
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的:
state = {
list: {
objA: {
name: 'A',
age: 20
},
objB: {
name: 'B',
age: 25
},
objC: {
show: false
},
objD: 'D'
}
}
这时需要我们修改list
中objA
中的name
属性和objD
的属性,遇到这样的情况我们一般会使用什么办法解决呢?其实有三种解决方案:
方案一(作用于对象中的深层级和第一层级):
this.setState({
list: {
...this.state.list,
objA: {
...this.state.list.objA,
name: 'A1'
}
}
})
方案二(作用对象中的第一层级):
let data = Object.assign({}, this.state.list, {objD: 'D1'})
this.setState({
list: data
})
方案三(作用于对象中的深层级和第一层级):
let data = this.state.list;
data.objA.name = 'A1';
data.objD = 'D1';
this.setState({
list: data
})
总结:
| 方案 | 适用范围 | 缺点
| :-: | :-: | :-: |
| 方案一 |多层级和单一层级都存在 | 写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏
| 方案二 |只适用与第一层级 | 只适用第一层级
| 方案三 |多层级和单一层级都存在 | 若存在深层及和单一层级的,需要多次赋值
这三种写法都可以,使用哪一种方案,还需要根据业务来定.希望看了之后,能给大家带来一些帮助,谢谢.