Реагировать бесконечный свиток не работает должным образом

Question

Я использую компонент реагирования на бесконечную прокрутку для своего проекта, и по какой-то причине он не работает после первой прокрутки.

Первая попытка: я вызываю API внутри componentDidMount() после того, как этот API вызывает InfiniteScroll,

constructor(props) {
        super(props);
this.state = {
            history : {
                'campaign_id': '',
                'bid_filter': '',
                "msisdn": localStorage.getItem("mobile"),
                "offset": 0
            },
            offset:0,
            hasMore: true,
} 

componentDidMount(){       
        this.props.dataList(this.state.history); //API 
    }

history это набор данных, который я хочу отправить через веб-сервис. history что внутри конструктора. После прокрутки я обновляю history.offset and state.offset внутри fetchMoreData() и вызвать API.

 fetchMoreData = () => {
     const { games } = this.props;
     this.setState(prevState => ({
            history: {
                ...prevState.history,
                offset: this.state.offset + LIMIT 
            }            
            }));
            this.setState({ offset: this.state.history.offset})
           this.props.dataList(this.state.history);  //API 
    }


<InfiniteScroll                        
       dataLength={games.data.count}
       next={this.fetchMoreData.bind(this)}
       hasMore={true}
       loader={<p className="loading-txt">Loading...</p>}
       >
        <Table hover>
           <thead>
             <tr>
               <th>{STRING.VALUE}</th>
               <th>{STRING.TIME}</th>
              </tr>
                  </thead>
                    <tbody>
                        {this.gameBody()} 
                    </tbody>
                </Table>
      </InfiniteScroll>

Внутри файла действия я проверяю текущее смещение и набор ответных данных с предыдущим набором данных и отправляю его компоненту.

export function dataList(data) {
return function (dispatch, getState) { 
const url = `api/aaaa/abc/games`;
      const state = getState();
      let dataset = [];
      const { games } = state;

 axios.post(`${url}`,
        data,
        ).then(function (response) {
       const objInitial={ // create copy of empty response
            code:0,
            data :{
              count:response.data.count,
              data:[]
            },
            friendly_message: response.data.friendly_message,
            message: response.data.message,
            status: true
          }

          if(data.offset>0){ //check offset and concat response with previous data

            dataset=games.data.data.concat(response.data.data)
            objInitial.data.data=dataset
          }
          else{

            dataset=response.data.data
            objInitial.data.data=dataset

          }
         dispatch(
            { type: CAMPAIGN_LIST, 
              payload: objInitial  // dispatch data set to component
            });
   });
};
}