我正在使用 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 调用。