反應js分頁 - 從數組中刪除空值

Question

我試圖讓分頁邏輯，當你點擊最後一個索引時，將改變頁碼。

EG

1 2 3 4 5 

如果5個用戶點擊，它應更改爲

2 3 4 5 6 

等等...

我設法如此，但我第一次分配元素爲null，因此我的數組越來越大，因爲我沒有刪除任何元素。

我要刪除陣列中的所有空值，我試圖用各種方法以下劃線：_wihout, _reject，但它總是給我的錯誤_ is undefined。

這是該特定代碼

handleClick(event) { 
     this.setState({ 
      currentPage: Number(event.target.id), 
     }) 
     if (this.state.currentPage === this.state.pageNumbers[this.state.pageNumbers.length-1]) { 
      this.state.pageNumbers.push(this.state.pageNumbers.length + 1); 
      this.state.pageNumbers[this.state.startIndex] = null; 
      this.state.startIndex++; 
      this.state.pageNumbers._.without(array, null); 
       // delete null values 
     } 
    } 

Answer 1

首先的setState方法是異步的片段。您必須牢記這一點，並使用setState(state, callback)中的第二個參數來獲取新的狀態值。例如

this.setState({ 
    currentPage: Number(event.target.id), 
},() => { 
    if (this.state.currentPage === this.state.pageNumbers[this.state.pageNumbers.length - 1]) {} 
    // and so on 
}) 

要過濾null值超出你不需要使用第三方庫。您可以使用Array#filter來實現它。除此之外，你不應該直接用this.state.xy = yz設置狀態字段。

要操縱狀態變量，創建一個新副本並將其與setState稍後分配它總是一個好主意。沿着這個東西：

const pageNumbers = Object.assign({}, this.state.pageNumbers); // copy 
pageNumbers[this.state.startIndex] = null; 
this.setState({ 
    pageNumbers: pageNumbers.filter(noNull => noNull), 
    startIndex: this.state.startIndex + 1 
});