Javascript 用qwest反应无限卷轴

我目前正在尝试使用

create react app

和

Infinite Scroller

和

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

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/TableSortLabel”导入TableSortLabel；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/styles/colorManipulator”导入{darken}；
从“react infinite scroller”导入InfiniteScroll；
从“qwest”导入qwest；
从“firebase/app”导入*作为firebase；
导入“firebase/数据库”；
类ShowTable扩展组件{
构造函数（props）{//加载/默认数据时
超级（道具）；
此.state={
listingData:[]，
hasMoreItems：对
};
}
加载项（第页）{
让dbUrl='1！'https://example.firebaseio.com/users.json?limitToLast=1&orderBy=“$key”；
//无限滚动项的变量
let ending=9390；//应使用下面的get函数进行更新。。。
qwest.get（dbUrl）
.then（函数（xhr，响应）{
让结果；
结果=Object.keys（响应）[0]；
结果=数学单元（结果/5）*5；
结束=结果；
});
让那=这；
让urlDB=https://example.firebaseio.com/users.json';
设startAt=0；
设endAt=5；
qwest.get（urlDB{
订购人：“$key”，
startAt:“'+startAt+”，
endAt:“'”+endAt+“'
})
.then（函数（xhr，响应）{
log（“这里有响应”）；
如果（结束）{
listingData.push（数据列表）；
});
console.log（listingData）；
那是一个州({
listingData:listingData
});
log（“我是在setState listingData之后出现的”）；
}否则{
log（“我遇到了其他人”）；
那是一个州({
hasMoreItems：false
});
}
startAt=startAt+5；
endAt=endAt+5；
});
}
render（）{
const{spating}=this.state；
const{classes}=this.props；
常量加载器=加载。。。；
设项目=[]；
this.state.listingData.map（（tableData，i）=>{
控制台日志（“测试”）；
让利斯塔；
让listB；
如果（tableData.fromListA==“1”&&tableData.fromListB==“1”）{
listA=“x”；
listB=“x”；
}else if（tableData.fromListA==“1”）{
listA=“x”；
}else if（tableData.fromListB==“1”）{
listB=“x”；
}
物品。推送（
{tableData.userid}
{tableData.username}
{listA}
{listB}
{tableData.lastChecked}
);
});
报税表（
用户ID
用户名
在利斯塔
在列表B上
句柄更新
{items}
)
}
}

我的两个问题如下：

1：我不能用qwest更新

let end

。获取我得到的值，我不知道怎么做

2：我遇到了if条件，它说

console.log（“我遇到了if endAt/ending”）

，但是在那之后，脚本就不再做任何事情了。没有控制台日志，没有列表数据中的项目，我不知道为什么。我得到一个关于

元素上的键的错误，但它至少应该渲染，但它没有。我不知道为什么

我是一个新的反应，仍然在学习，所以。。。如果我在这里犯了一个非常“愚蠢”的错误，我很抱歉，但实际上我已经两天没什么头绪了

//编辑：

这是我的控制台

以下是我的想法

我认为这是因为异步调用的性质。您正在执行初始的

qwest.get

async，然后设置一些变量并在第一个变量获取数据之前调用第二个

qwest.get

。如果需要同步调用，我会在第一个

qwest之后抛出所有内容。将

放入它自己的函数中，然后在第一个

qwest.get中的then语句中调用它。像

我看到了一些问题

• 不需要

  让that=this

  ，只需使用

  this

• 您没有在任何地方使用

  page

  ，我认为您需要执行以下操作，并删除逻辑以在末尾重置startAt/endAt变量，因为它们什么也不做

• 更改您的

  响应。将
  映射到
  forEach
  并添加一些日志记录，以确保响应和行的格式符合您的期望。我猜响应的格式不正确（在第一次
  qwest.get
  中，在获取数据之前使用
  Object.keys（响应）
  ）

---

我试着在你的代码不同的时候使用无限滚动的演示。两个qwest呼叫，而不是一个；得到

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

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

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