[英]Maximum update depth exceeded- React component error
I am trying to implement lazy loading in my react component. 我正在尝试在我的react组件中实现延迟加载。 But whenever I update my state in reducer after calling the (loadMore) function it gives me this error.
但是每当我在调用(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.
Here is my article rendering file where i am implementing lazy loading. 这是我实现延迟加载的文章渲染文件。 I am not setState anywhere in the render.
我在渲染器的任何地方都没有setState。 I am not able to understand where the error is.
我不明白错误在哪里。 This component is called in article container.
此组件在商品容器中称为。 Below is the table.js component code-
以下是table.js组件代码-
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>
<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);
I suspect that you are using React Infinite Scroller and this answer is based on that. 我怀疑您正在使用React Infinite Scroller ,此答案基于此。
The problem is that you are setting hasMore={true}
. 问题在于您正在设置
hasMore={true}
。 When you scroll to the end of page and hasMore
is true
, the component request more data by call loadMore
, the new data is the same as the previous one (so the page is not scrolled up) but hasMore
is still true
(it must be false
to tells the component that there is no new data) so it calls loadMore
again, and again,... and crash. 当您滚动到页面末尾并且
hasMore
为true
,该组件通过调用loadMore
请求更多数据,新数据与上一个相同(因此该页面不会向上滚动),但是hasMore
仍然为true
(必须为false
告诉组件没有新数据),因此它再次调用loadMore
,然后……并崩溃。
Solution: Provide a mechanic to check if there is new data available and pass it to hasMore
解决方案:提供一个机制来检查是否有可用的新数据并将其传递给
hasMore
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.