javascript - 我正在尝试在我的 react/redux 应用程序中实现无限滚动，但是 Get More Posts 函数正在执行多次

问题描述

在我的主页组件上，我正在尝试使用滚动事件侦听器实现无限滚动。我在 componentDidMount 中加载了第一组帖子，然后当我接近页面底部时，我想执行一个调用我的 API 并获取下一组帖子的 redux 操作。

但是，我可以通过控制台日志看到 redux 操作正在执行很多次。我在页面底部设置了一个“<hr”标签，并使用它来识别我何时到达页面底部。

这是我的 Home 组件上的代码：

class home extends Component {
state = {
    scrolling: false,
};

componentDidMount() {
    this.props.getPostsInfinite();
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = (e) => {
    console.log('scrolling');
    const { scrolling } = this.state;
    if (scrolling) return;
    const lastElement = document.getElementById('scrollEnd');
    const lastElementOffset = lastElement.offsetTop + lastElement.clientHeight;
    const pageOffset = window.pageYOffset + window.innerHeight;
    const bottomOffset = 100;
    if (pageOffset > lastElementOffset - bottomOffset) this.onButtonClick();
};

onButtonClick = () => {
    this.props.getPostsInfiniteNext({
        lastVisible: this.props.data.lastVisible,
    });
};

render() {
    const { posts, loading } = this.props.data;
    const { classes } = this.props;
    let recentPostsMarkup = !loading ? (
        posts.map((post) => {
            return <Post key={post.postId} post={post} />;
        })
    ) : (
        <div className={classes.progressContainerPosts}>
            <CircularProgress />
        </div>
    );
    return (
        <Fragment>
            <Grid container spacing={10} id="grid">
                <Grid item sm={4} xs={12}>
                    <Profile />
                </Grid>
                <Grid item sm={8} xs={12}>
                    <CreatePostForm />
                    {recentPostsMarkup}
                </Grid>
            </Grid>
            <hr id="scrollEnd" />
        </Fragment>
    );
}

这是获取下一组帖子的功能

    export const getPostsInfiniteNext = (lastVisible) => (dispatch) => {
    console.log('get next set of posts running');
    axios
        .post('/posts/infinite/next', lastVisible)
        .then((res) => {
            dispatch({
                type: SET_POSTS_NEXT,
                payload: res.data,
            });
            dispatch({
                type: SET_LAST_VISIBLE,
                payload: res.data,
            });
        })
        .catch((err) => {
            dispatch({
                type: SET_POSTS,
                payload: [],
            });
        });
};

标签： javascriptreactjsreduxreact-reduxinfinite-scroll

javascript - 我正在尝试在我的 react/redux 应用程序中实现无限滚动，但是 Get More Posts 函数正在执行多次

问题描述

解决方案

推荐阅读