To call api twice download of page

[arsenaltech-bhumi]

Describe the bug To call api twice download of page

To Reproduce I have 10 records in a single API call but it display 20 records on load of page. It is making two API call on load. Don't know why. Here is my code

Is there any issue in fetchOrderRequest call? I am calling from componentDidMount and loadmore both? Is this creating issue because of this?

But If I remove fetchOrderRequest call from componentDidMount, no API call recorded.

import React, { Component } from 'react'
import { Link } from "react-router-dom";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { connect } from "react-redux";
import InfiniteScroll from 'react-infinite-scroller';

class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {
        OrderItems: [],
        hasMoreItems: true,
        Rts: null
    };
  }
  componentDidMount() {
    if(this.props.OrderData != ''){
      return
    }
   this.props.fetchOrderRequest(0) 
  }
  componentWillUnmount() {
    this.props.fetchOrderRequest(0)
  }
  render() {
    const data = this.props.OrderData;
    let OrderItems = null;
    let hasMore = (this.props.OrderData.length == this.props.count) ? false : true;
    if (data) {
      OrderItems = data;
      hasMore = true;
    }
    const {loading} = this.props;
    return (
      <>    
        <Loader show={loading} message={spinner}>
          <Paper >
          <InfiniteScroll
          pageStart={0}
          loadMore={this.props.fetchOrderRequest.bind(this)}
          hasMore={hasMore}
          loader= {loading}
          initialLoad= "false">
          <Table className="custom-table table-striped">
            <TableBody>
              {OrderItems ? OrderItems.map(item => {
                return (
                  <TableRow key={item.Id}>
                    <TableCell >{item.name}</TableCell>
                    <TableCell>{item.code}</TableCell>
                    <TableCell >{item.price}</TableCell>
                    <TableCell >{item.date}</TableCell>
                    <TableCell >{item.color}</TableCell>
                  </TableRow>
                );
              })  : null}
            </TableBody>
          </Table>
          </InfiniteScroll>
        </Paper>
        </Loader>
    </>
    )
  }
}

function mapStateToProps(state){
   
	return {
    OrderData: state.auth.OrderData,
    loading: state.auth.loading,
    Rts: state.auth.Rts,
    count: state.auth.count,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchOrderRequest: (Rts) => dispatch(auth.actions.fetchOrderRequest(Rts)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Order);

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

• OS: [e.g. Mac]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]