Question

当用户到达屏幕底部时，我已经组合了一个无限滚动以加载更多项目。第一次运行正常，但是由于某些原因，从redux加载第一个nextLink时，eventListener似乎消失了。

我的代码：

    import React, { Component } from "react";
import { connect } from "react-redux";

import * as teamsActions from "../../store/teams/actions";
import TeamCard from "../../common/teamCard/teamCard";
import ReactAI from "react-appinsights";
import WithLoading from "../../common/utils/withLoading";
import {
    objectToArray,
    sortArray
} from "../../assets/general_functions/objectsAndArrays";
import { faRubleSign } from "@fortawesome/free-solid-svg-icons";

class TeamsContainer extends Component {
    _isMounted = false;
    state = {
        scrolling: false
    };
componentDidMount() {
    this._isMounted = true;
    this.props.onFetchTeams();

    this.scrollListener = window.addEventListener("scroll", this.handleScroll);
}
s;

componentWillUnmount() {
    this._isMounted = false;
    window.removeEventListener("scroll", this.handleScroll);
}

loadTeams = () => {
    console.log("is teams loading?", this.props.loading);
    if (this.props.loading === false) {
        console.log("What is the nextLink", this.props.teams["@odata.nextLink"]);
        this.props.onFetchMoreTeams(this.props.teams["@odata.nextLink"]);
    }
};

loadMore = () => {
    this.setState(
        {
            scrolling: true
        },
        this.loadTeams
    );
};

handleScroll = () => {
    const { scrolling } = this.state;

    if (scrolling) return;
    if (
        typeof this.props.teams.value !== "undefined" ||
        this.props.teams.value > 0
    ) {
        console.log("value", this.props.teams.value);

        const lastTeam = document.querySelector(
            ".team-card-wrapper:last-of-type"
        );

        // get the height of the current team, and get the height of the current position on screen.
        const lastTeamOffset = lastTeam.offsetTop + lastTeam.clientHeight;
        const pageOffset = window.pageYOffset + window.innerHeight;
        const bottomOffset = 30;

        if (pageOffset > lastTeamOffset - bottomOffset) {
            this.loadMore();
        }
    }
};

render() {
    let loading = "";
    let error = "";
    let teams = [];
    let delay = 0;
    let loadMoreButton = "";

    // check whether the component is fetching data
    let loader = "";
    if (this.props.teamsLoading) {
        loader = <WithLoading isLoading={true} />;
    }

    // check if there was an error
    this.props.error && this.props.loading === false
        ? (error = <p>There was an error</p>)
        : (error = "");

    // reorder the teams and make teamCards of it.
    if (this.props.teams["value"]) {
        // convert the teams object to an array of objects.
        // order it by sequence property.
        teams = this.props.teams.value;
        teams = objectToArray(this.props.teams["value"]);
        teams = teams.sort(sortArray("sequence")).reverse();

        teams = teams.map(team => {


            if (delay === 300) {
                    delay = 0;
                }
                delay = delay + 75;

                return (
                    <TeamCard
                        delay={delay}
                        id={team.id}
                        title={team.title}
                        description={team.description}
                        isFavorite={team.isFavorite}
                        memberCount={team.memberCount}
                        key={team.id}
                    />
                );
            });
        } else {
            teams = loader = <WithLoading isLoading={true} />;
        }
        // this.props.teams["value"]);

        return (
            <React.Fragment>
                <div className="App">
                    {loader == "" ? (
                        <div className="team-cards-wrapper">{teams}</div>
                    ) : (
                        <div>{loader}</div>
                    )}
                </div>
            </React.Fragment>
        );
    }
}

const mapStateToProps = state => {
    return {
        error: state.teamsSlice.teamsError,
        loading: state.teamsSlice.teamsLoading,
        teams: state.teamsSlice.teams,
        searchTerm: state.teamsSlice.searchTerm
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onFetchTeams: () => dispatch(teamsActions.fetchTeams()),
        onFetchMoreTeams: teamsNextLink =>
            dispatch(teamsActions.fetchMoreTeams(teamsNextLink))
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ReactAI.withTracking(TeamsContainer));

我的控制台（该值打印在滚动条上。加载后，它不再回显任何值）：

根据控制台的事件处理程序：

Redux商店：

编辑：

我发现state.scrolling存在问题。设置为true，但在加载数据后再也不会重置。

非常感谢您的帮助！干杯

Answer 1

我认为是因为您有两个componentWillUnMount。这行

window.addEventListener("scroll", e => {
    this.handleScroll(e);
});

似乎有点错误。可能只有window.addEventListener（“ scroll”，this.handleScroll） -第二件事是，我认为您应该在滚动事件上使用去抖功能，以便提高性能

Answer 2

我发现问题出在将滚动状态设置回false。

在获取了更多的redux项目之后，我决定使用超时来反跳传入的类似api请求。

setTimeout(() => {
            this.setState({ scrolling: false });
        }, 300);

当页面重新呈现时，对addEventListener进行反应

2 个答案: