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

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

---

但是，我可以通过控制台日志看到redux操作执行了很多次。我在handleScroll中设置了一个“可能是计算问题，这可能会导致此问题。OnButton单击方法被激发。此外，滚动状态变量从未设置为true

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: [],
            });
        });
};