javascript - 用 qwest react 无限滚动

Question

我目前正在尝试使用 create-react-app 构建一个网络应用程序和包裹 Infinite-Scroller和 qwest

( 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:我无法更新let ending对于我得到的 qwest.get 值，我不知道该怎么做。

2:我通过了 if 条件，上面写着 console.log("i came through if endAt/ending")但在那之后，脚本就不再做任何事情了。没有任何控制台日志，listingData 中没有项目或任何东西，我不知道为什么。我在 <InfiniteScroll> 上收到一个关于键的错误元素，但它至少应该呈现，但它没有。我不知道为什么。

我是新手，还在学习中，所以...如果我在这里犯了一个非常“愚蠢”的错误，我很抱歉，但实际上我已经有 2 天无能为力了。

//编辑:

这是我的控制台

Answer 1

这是我的想法

1. 我认为这是由于异步调用的性质造成的。您正在进行初始 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)
});

1. 我遇到了一些问题
   • 不需要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)
})