-1

我正在使用 redux saga 并反应无限滚动（https://www.npmjs.com/package/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);

fetchOrderRequest 调用有什么问题吗？我是从componentDidMount和loadmore调用的吗？这是因为这个创建问题吗？

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

4

1 回答 1

0

问题已修复。此行有错误，需要传递height和overflow。

<Paper  style={{height:'410px',overflow:'auto'}} >
于 2020-07-24T12:24:42.413 回答