react 數組刪除某一項更新setState無效的問題，react js怎么刪除數組某一項，splice刪除了某一項頁面數據卻不變

前言：相信許多人應該踩過這個坑，使用數組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這個改變后的數組
        });
      }
    });
  };

如果幫你解決到了問題請點個贊(●'◡'●)