javascript - 用qwest react 无限滚动

我目前正在尝试使用create-react-app以及Infinite-Scroller和qwest包构建一个Webapp

(https://www.npmjs.com/package/react-infinite-scroller)

(https://www.npmjs.com/package/qwest)

我的代码当前如下所示:

import React, { Component } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import { darken } from '@material-ui/core/styles/colorManipulator';
import InfiniteScroll from 'react-infinite-scroller';
import qwest from 'qwest';
import * as firebase from 'firebase/app';
import 'firebase/database';

class ShowTable extends Component {

    constructor(props) { // While load / default data
        super(props);
        this.state = {
            listingData: [],
            hasMoreItems: true
        };
    }

    loadItems(page) {
        let dbUrl = 'https://example.firebaseio.com/users.json?limitToLast=1&orderBy="$key"';
        // Variables for InfiniteScrollitems
        let ending = 9390; // Should be updated with get-function below...
        qwest.get(dbUrl)
            .then(function(xhr, response) {
                let result;
                result = Object.keys(response)[0];
                result = Math.ceil(result / 5) * 5;
                ending = result;
            });

        let that = this;
        let urlDB = 'https://example.firebaseio.com/users.json';
        let startAt = 0;
        let endAt = 5;
        qwest.get(urlDB, {
                orderBy: '"$key"',
                startAt: '"' + startAt + '"',
                endAt: '"' + endAt + '"'
            })
            .then(function(xhr, response) {
                console.log("response is here");
                if (endAt <= ending) {
                    let listingData = that.state.listingData;
                    console.log("i came through if endAt/ending");
                    response.map((dataList) => {
                        listingData.push(dataList);
                    });
                    console.log(listingData);
                    that.setState({
                        listingData: listingData
                    });
                    console.log("i came after setState listingData");
                } else {
                    console.log("i came through else");
                    that.setState({
                        hasMoreItems: false
                    });
                }
                startAt = startAt + 5;
                endAt = endAt + 5;
            });
    }

    render() {
        const { spacing } = this.state;
        const { classes } = this.props;

        const loader = <tr><td><div className="loader">Loading...</div></td></tr>;
        let items = [];
        this.state.listingData.map((tableData, i) => {
            console.log("Test");
            let listA;
            let listB;
            if (tableData.fromListA === "1" && tableData.fromListB === "1") {
                listA = "x";
                listB = "x";
            } else if (tableData.fromListA === "1") {
                listA = "x";
            } else if (tableData.fromListB === "1") {
                listB = "x";
            }
            items.push(
                <TableRow key={i} data-key={i}>
                 <TableCell>{tableData.userid}</TableCell>
                 <TableCell>{tableData.username}</TableCell>
                 <TableCell>{listA}</TableCell>
                 <TableCell>{listB}</TableCell>
                 <TableCell>{tableData.lastChecked}</TableCell>
                </TableRow>
            );
        });

        return (
            <Table className={classes.table} id="dataTable">
             <TableHead>
              <TableRow>
               <TableCell>userid</TableCell>
               <TableCell>username</TableCell>
               <TableCell>on listA</TableCell>
               <TableCell>on listB</TableCell>
               <TableCell>Handle updated</TableCell>
              </TableRow>
             </TableHead>

            <InfiniteScroll
              pageStart={0}
              loadMore={this.loadItems.bind(this)}
              hasMore={this.state.hasMoreItems}
              loader={loader}
              element={'tbody'}
              className={classes.root}
              initialLoad={true}
              useWindow={true}
             >
              {items}
            </InfiniteScroll>

           </Table>
        )
    }
}

我的两个问题如下:

1:我无法使用获得的qwest.get值更新let ending，但我不知道该怎么做。

2:我遇到了if条件，它说console.log("i came through if endAt/ending")，但是之后，该脚本不再执行任何操作。没有任何控制台日志，没有listingData或其他任何项目，我也不知道为什么。我收到有关<InfiniteScroll>元素上的键的一个错误，但它至少应该呈现，但事实并非如此。我不知道为什么。

我是新来的人，仍然在学习，所以...很抱歉，如果这是我在这里犯的一个“愚蠢”错误，但实际上我已经两天了。

//编辑:

这是我的控制台

最佳答案

这是我的想法

我认为这是由于异步调用的性质而发生的。您正在执行初始的qwest.get异步操作，然后设置一些变量并调用第二个qwest.get，然后第一个可以获取数据。如果您需要同步调用，则将第一个qwest.get之后的所有内容都放入其自己的函数中，然后在第一个qwest.get中的then语句中调用它。像....

qwest.get(dbUrl)
   .then(function(xhr, response) {
      let result = Object.keys(response)[0];
      result = Math.ceil(result / 5) * 5;
      this.continueLoad(result, page)
});

我看到了一些问题

无需let that = this，只需使用this

您在任何地方都没有使用page，我想您要执行以下操作，并删除逻辑以在末尾重置startAt / endAt变量，因为它们没有执行任何操作。

let startAt = 0 + (page - 1) * 5
let endAt = 5 + (page - 1) * 5

将response.map更改为forEach，并添加一些日志记录以确保响应和行是您期望的格式。我的猜测是，响应的格式不正确(在获取数据之前，在您的第一个qwest.get中使用Object.keys(response))。

console.log("i came through if endAt/ending")
console.log(response)
response.forEach((dataList) => {
   console.log(dataList)
   listingData.push(dataList)
})