Javascript 在react js中实现无限滚动时无休止地更新状态

我想添加无限滚动到我的项目，但面临的问题。我在控制台出错，我的状态经常更新。我使用插件：React Infinite Scroller。如果我理解正确，打开页面时，必须显示一个页面并向“gen_div”funct发出请求，但出现错误。谢谢

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>
       )
    }

}

MyComponent{
建造师（道具）{
超级（道具）；
this.state={div_list:[]}
}
总务室（）{
var new_list=this.state.div_list；
新列表。推送（1）；
新列表。推送（2）；
新列表。推送（3）；
this.setState（{div_list:new_list}）
}
render（）{
返回(
{this.state.div_list}
)
}
}

尝试使用回调函数

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}});
    }
}

gen_div=（）=>{
this.setState（prevState=>{
让new_list=prevState.div_list；
新列表。推送（1）；
新列表。推送（2）；
新列表。推送（3）；
返回（{…prevState}，{div_list:new_list}）；
}
}

可能存在很多问题。例如，在上面的示例中，``此``绑定看起来不正确。请编辑以共享确切的错误，好吗？顺便说一句，您正在修改状态。

var new\u list=this.state.div\u list

创建对状态数组的引用，然后

.push（）

正在变异状态数组。React中的变异状态是一个很大的禁忌。复制要更改的状态数组/对象：

var new\u list=this.state.div\u list.slice（）；

。还可以查看spread操作符，使数组/对象的副本变得简短而简单。