CODEWITHSUNDEEP
javascriptreactjsreduxredux-sagareact-infinite-scroll
Bhumi Shah
Bhumi Shah

Reputation: 9476

Redux Saga - React Infinite Scroll - two api call on load

I am using redux saga and react infinite scroller(https://www.npmjs.com/package/react-infinite-scroller)

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

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

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.

Upvotes: -1

Views: 372

Answers (1)

Bhumi Shah
Bhumi Shah

Reputation: 9476

Issue is fixed. There was an error on this line, need to pass height and overflow.

<Paper  style={{height:'410px',overflow:'auto'}} >

Upvotes: 0

Related Questions