Question

我试图制作分页逻辑，当你点击最后一个索引时会改变页码。

E.G

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)中的第二个参数来获取新的状态值。 e.g。

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

React js分页 - 从数组中删除空值

1 个答案: