Question

我在页面上有项目列表。当我滚动到底部时，有一个“加载更多”按钮。当我单击此按钮时，我会收到新项目并将其合并到原始列表中：

handleLoadProducts = (append = false) => {
    this.setState({
        isLoading: true,
    });

    fetch('/products', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            filters: Object.keys(this.state.filters),
        }),
    }).then((response) => {
        response.json().then((data) => { 
            this.setState({
                products: append ? this.state.products.concat(data.data): data.data,
                isLoading: false,
                hasMore: data.data && data.data.length > 0
            }); 
        })
    }).catch((e) => {
        console.log(e, 'error');
    });
};

然后在渲染器中我有这样的东西：

<Products products={this.state.products} isLoading={this.state.isLoading}/>

但是，此后，页面将滚动回到顶部。有可能防止这种情况吗？即留在你的地方？

Answer 1

您必须确保状态仅设置一次：

if(!this.state /* && !this.state.products */) {
    this.setState({ products: data });
}
else {
    this.state.products.push(data.data);
}

不确定其余的逻辑是什么，这就是为什么我在this.state.products周围添加注释的原因。

合并后，页面滚动回到顶部

1 个答案: