Javascript 超过最大更新深度-反应组件错误

我正在尝试在我的react组件中实现延迟加载。但是，每当我在调用loadMore函数后更新reducer中的状态时，它就会给我这个错误

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这是我的文章呈现文件，我在其中实现了延迟加载。我不在渲染中的任何位置设置状态。我无法理解错误在哪里。 此组件在项目容器中调用。 下面是table.js组件代码-

---

我怀疑您正在使用，而这个答案正是基于此

问题是您正在设置hasMore={true}。当您滚动到页面末尾且hasMore为true时，组件通过调用loadMore请求更多数据，新数据与前一个数据相同，因此页面不会向上滚动，但hasMore仍然为true。如果告诉组件没有新数据，则必须为false，以便组件再次调用loadMore，然后再次，。。。然后崩溃

---

解决方案：提供一名技工来检查是否有新数据可用，并将其传递给hasMore

以确保安全。你在用什么？

class Table extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    }
}

loadMore = () => {
    if (this.props.articleReducer.article_data.length > 0) {
        this.props.dispatch(loadArticleDataApi(2, 'lazyLoad'));
    }
}
render() {
    return (
        <div>
            <InfiniteScroll pageStart={1} loadMore={this.loadMore} initialLoad={true}
                hasMore={true} loader={< div className = "loader" key = {0}> Loading ...</div>}>
                <div className="table">
                    <div className="container ">
                        <div className="show-grid row">
                            <div className="col-xs-4 head1">Title</div>
                            <div className="col-xs-2 head2">Pub All</div>
                            <div className="col-xs-2 head3">Publisher</div>
                            <div className="col-xs-2 head4">Rss</div>
                            <div className="col-xs-1 head5">AMP</div>
                            <div className="col-xs-1 head7">Publish</div>
                        </div>
                        {this.props.articleReducer.article_data.map((ele, index) => {
                                let hreff = `https://so.city/amp/delhi/${ele._id}.html`;
                                return (

                                    <div className="show-grid row rowData" key={index}>
                                        <div className="col-xs-4">{ele.title}</div>
                                        <div className="col-xs-2">
                                            <SwitchButtonPubAll checkedProp={ele.allFeedPublished}/>
                                        </div>
                                        <div className="col-xs-2 publisher">{ele.createdBy}</div>
                                        <div className="col-xs-2">
                                            <SwitchButton checkedProp={ele.rssCreated}/>
                                        </div>
                                        <div className="col-xs-1 amp">
                                            <i className="fa fa-refresh" aria-hidden="true"></i>
                                            &nbsp;
                                            <a href={hreff}>
                                                <i className="fa fa-link" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                        <div className="col-xs-1">
                                            <i
                                                className={ele.published === 1
                                                ? "fa fa-eye eyee"
                                                : "fa fa-eye-slash"}
                                                aria-hidden="true"></i>
                                        </div>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </InfiniteScroll>
        </div>
    )
}
}

const mapDispatchToProps = (dispatch) => {
return {dispatch};
}
export default connect(state => state, mapDispatchToProps)(Table);