5、6秒后componentDidMount自动调用api

Question

    import React from 'react'
    import FormatUrl from 'utils/UrlFormatter.jsx'

    class SocialChatter extends React.Component {
        constructor(props){
            super(props)
            this.state = {
                chatter : [],
                limit:5,
                page:1,
                totalPages:null,
                channel:null,
                category:'Dish Care'
            }    
        }


        componentDidMount = () => {
            const {limit, page, chatter } = this.state;
            let category = localStorage.getItem('category')
            let url = FormatUrl(`/api/category/social/?category=${category}&limit=${limit}&page=${page}`)        
            fetch(url)
            .then(res => res.json())
            .then(res => {
                this.setState({
                    chatter:res.data,
                    chatter:[...chatter, ...res.data]
                });
            })
        }

        loadMore = () => {
            this.setState(prevState => ({
                page: prevState.page + 1,
            }), () => this.componentDidMount())
        }


        render(){
            return (
                <div>
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <div class="dropdown no-arrow" style={{ padding: "8px 0 8px 0" }}>      
                            <a href="#" style={{ padding:'0 16px 0 0' }}>
                            </a>
                            <a href="#" style={{ padding:'0 16px 0 0' }}> 
                            </a>
                            <a href="#">
                            </a>
                        </div>
                    </div>
                        <div class="card-body">
                            <div class="chart-area">
                            <div className="row">
                                    <div>
                                           {
                                                this.state.chatter.map((chat, i) => {
                                                    return (
                                                    <div className="col-sm-12" key={i}>
                                                        <div class="panel panel-default">
                                                            <div class="panel-heading" style={{ textAlign:'center' }}>
                                                                <a href={ chat.url } target="_blank" rel="noopener noreferrer" style={{ textDecoration:'none' }}>
                                                                    { chat.title }
                                                                </a>
                                                            </div>
                                                            <div class="panel-body">
                                                            { chat.content }
                                                            <br/>
                                                            <p style={{ color:'grey',fontWeight:'bold',float:'right' }}>
                                                                { chat.date }
                                                            </p>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    )
                                                })
                                            }
                                            <p style={{ textAlign:'center' }}><button onClick={this.loadMore} className="btn btn-danger">View More</button></p>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            )
        }
    }

    export default SocialChatter;

我在这里从api中获取数据。 并通过映射json在此处显示它们。

但是，我的componentDidMount（）在5、6秒后会自动被调用。

一段时间后它会自动调用prev状态。

这个问题使我很困惑，我找不到适合该问题的解决方案。

请看看它发生了什么。