jsページ分割に反応する - 配列からヌル値を削除する

Question

最後のインデックスをクリックしたときにページ番号を変更するページングロジックを作成しようとしています。

EG

1 2 3 4 5 

ユーザーが5をクリックすると、それは

2 3 4 5 6 

に変更する必要がありますのように...

私は、しかし、私が最初に割り当ててることに成功し要素をnullにすると、要素が削除されないため、配列が大きくなります。

配列内のすべての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)の2番目のパラメータを使用する必要があります。例えばサードパーティのライブラリを使用する必要はありませんnull値をフィルタリングするには

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

。 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 
});