Javascript Redux Saga-反应无限滚动-加载两个api调用

我正在使用redux传奇和react infinite scroller（）

我在一个API调用中有10条记录，但它在加载页面时显示20条记录

它在加载时进行两次API调用。不知道为什么。这是我的密码

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

import React，{Component}来自“React”
从“react router dom”导入{Link}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“react redux”导入{connect}；
从“react infinite scroller”导入InfiniteScroll；
类顺序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
订单项：[]，
hasMoreItems：是的，
Rts:null
};
}
componentDidMount（）{
如果（this.props.OrderData！=''）{
返回
}
this.props.fetchOrderRequest（0）
}
组件将卸载（）{
this.props.fetchOrderRequest（0）
}
render（）{
const data=this.props.OrderData；
让OrderItems=null；
让hasMore=（this.props.OrderData.length==this.props.count）？false:true；
如果（数据）{
OrderItems=数据；
哈斯莫尔=真；
}
const{loading}=this.props；
返回(
{OrderItems？OrderItems.map（item=>{
返回(
{item.name}
{item.code}
{item.price}
{item.date}
{item.color}
);
})：null}
)
}
}
函数MapStateTops（状态）{
返回{
OrderData:state.auth.OrderData，
加载：state.auth.loading，
Rts:state.auth.Rts，
计数：state.auth.count，
}
}
const mapDispatchToProps=（调度）=>{
返回{
fetchOrderRequest：（Rts）=>dispatch（auth.actions.fetchOrderRequest（Rts）），
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（订单）；

fetchOrderRequest调用中是否存在任何问题？我是从component didmount和loadmore打电话来的？这是否就是造成问题的原因

---

但如果我从componentDidMount中删除fetchOrderRequest调用，则不会记录任何API调用。

问题已得到解决。此行出错，需要通过高度和溢出

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