在React JS中实现无限滚动时无休止地更新状态

Question

我想在项目中添加无限滚动，但是遇到了问题。我在控制台中出错，我的状态经常更新。我使用插件：React Infinite Scroller。如果我理解正确，则在打开页面时，必须显示一页并向'gen_div'func发出请求，但会发生错误。谢谢！

MyComponent {
    constructor(props) {
       super(props);
       this.state = {div_list: []}
    }

    gen_div() {
       var new_list = this.state.div_list;
       new_list.push(<div>1</div>);
       new_list.push(<div>2</div>);
       new_list.push(<div>3</div>);
       this.setState({div_list: new_list})
    }

    render() {
       return(
           <InfiniteScroll
             pageStart={1}
             loadMore={this.gen_div}
             hasMore={true}
             loader=(<h4>Loading..</h4>)
            >
              {this.state.div_list}
            </InfiniteScroll>
       )
    }

}

Answer 1

尝试将setState与回调一起使用。

gen_div = () => {
    this.setState(prevState => {
        let new_list = prevState.div_list;
        new_list.push(<div>1</div>);
        new_list.push(<div>2</div>);
        new_list.push(<div>3</div>);
        return({{...prevState}, {div_list: new_list}});
    }
}