在浏览器中单击返回后反应无限滚动重置状态

Question

几天前我开始使用 React。现在我已经有了一些使用 jQuery 的经验，但是这个效果更好！

我添加了一个无限卷轴，这一切都很好用，但有一点不太好用...

我有一个包含 link 的项目（社区）列表。 link 转到与 post 关联的页面。（例如：社区/2020202233）

当我在那里想回到社区页面时，一切又从头开始。

显然，因为我访问了 componentDidMount 并且所有内容都重新加载了。

我怎样才能防止这种情况发生。我试着把它带到 parent 但页面加载

这是我的代码：

state = {
    posts: [],
    limit: 10,
    start: 0, 
    maxPosts: 0
};


 componentDidMount(){

    const countPosts = config.conversations.databaseUrl + "?action=count_posts";
     axios.get(countPosts).then(count => {
        this.setState({ maxPosts: count.data });
    });

    const allPosts = config.conversations.databaseUrl + '?action=all_posts&start=' + this.state.start + '&limit=' + this.state.limit;
     axios.get(allPosts).then(posts => {
         //console.log(posts)
        this.setState({
            posts: posts.data,
            start: this.state.start + this.state.limit
        });
    });
        
    window.addEventListener('scroll', this.loadMore);
}


componentWillUnmount(){
    window.removeEventListener('scroll', this.loadMore);
}
  
loadMore = () => {
    if (window.innerHeight + document.documentElement.scrollTop + 1 >= document.scrollingElement.scrollHeight) {

        if (this.state.maxPosts > this.state.start) {

            const messages = config.conversations.databaseUrl + '?action=all_posts&start=' + this.state.start + '&limit=' + this.state.limit;
            axios.get(messages).then(posts => {
                
                const post = [...this.state.posts, ...posts.data];

                this.setState({
                    posts: post,
                    start: this.state.start + this.state.limit
                });
            });
        }
    }
}

render() {
    return (
        <main>
            <div className="my-3 p-3 bg-body rounded">
                <h6 className="border-bottom pb-2 mb-0">Suggestions</h6>
                <ul>
                    {this.state.posts.map(items => (
                        <Link key={items.post_id} to={`/community/${items.post_name}`}>
                            <Conversation items={items} />
                        </Link>
                    ))}
                
                </ul>
                <small className="d-block text-end mt-3">
                <a href="#">All suggestions</a>
                </small>
            </div>
        </main>
    );
};

Answer 1

您应该研究 redux 状态管理或使用 react 的 contextAPI（需要将 class 组件更改为功能组件）

在浏览器中单击返回后反应无限滚动重置状态

React infinity scroll reset state after click back in browser

reactjs

infinite-scroll