Question

我正在尝试在我的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.

这是我的文章渲染文件，我正在实现延迟加载。我不是渲染中的任何地方的setState。我无法理解错误的位置。在文章容器中调用此组件。下面是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>
                                            &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);

Answer 1

我怀疑你正在使用React Infinite Scroller，而这个答案就是基于此。

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

解决方案：提供机制以检查是否有新数据可用并将其传递给int number[] = {5,4,1,3,15} for(int i = number.length; i > 0; i--) { Log.e("number", number[i]) }

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

1 个答案: