前言:相信许多人应该踩过这个坑,使用数组splice方法删除时候,然后通过setState更新数组,setState不工作。打印原数组已经删除了某一项,页面数据却不变。
1、错误实例
removeEntities = (entities) => {
const { arr } = this.state;
arr.map((item, index) => {
if (item === entities) {
arr.splice(index, 1);
this.setState({
arr: arr,
});
console.log(arr) //这里打印发现arr已经发生了变化,但是setState在页面上数据却不改变是不是很奇怪呢?
解决办法:
removeEntities = (entities) => {
const { arr} = this.state;
arr.map((item, index) => {
if (item === entities) {
arr.splice(index, 1);
this.setState({
arr: arr,
//强制更新state!原因可能是因为,splice方法执行后会直接改变原来state里面的数组,
// 此时执行setState,react因为对比机制arr= arr而没有更新state,所以需要用其他state变化重新改变state
updata: this.state.updata + 1, //这里需要自己去state添加一个updata:1,让state强制变化
2、另一种最优雅最直观做法
removeEntities = (entities) => {
const { ownerEntitiesList } = this.state;
const newData = [...ownerEntitiesList]; //这里是重点,直接拷贝一份出来,
newData.map((item, index) => {
if (item === entities) {
newData.splice(index, 1);
this.setState({
ownerEntitiesList: newData, //直接setState这个改变后的数组
如果帮你解决到了问题请点个赞(●'◡'●)
不要说我不会,要说我可以学