FlatList 组件未显示结果

Question

我正在执行一项任务，其中我必须将 600 条虚拟记录无限滚动分页到我在 FlatList 渲染上编码的卡片。到目前为止，我已经使用 FlatList 实现了逻辑，但没有成功。在我做错的地方需要帮助，因此没有给出结果。这是组件代码：

import React, { Component } from "react";
import { StyleSheet, ActivityIndicator, FlatList, View } from "react-native";
import { Card } from "react-native-elements";

class InfiniteScroll extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: [],
      dummy: [],
      fetchingStatus: false,
      setOnLoad: false,
    };
    this.page = 0;
    let onEndReached = false;
  }
  componentDidMount() {
    var toput = [];
    for (let i = 0; i < 598; i++) {
      toput.push({
        name: "KHAN MARKET",
        order_no: "ORDER # DBZ-876",
        status: "Order Completed",
        price: "Total: .00",
        date: "Dec 19, 2019 2:32 PM",
      });
    }
    this.setState(
      {
        dummy: toput,
      },
      () => {
        console.log(this.state.dummy);
      }
    );
    this.apiCall();
  }

  apiCall = () => {
    var that = this;
    var old = that.page;
    that.page = that.page + 10;
    console.log(" *********** call " + this.page);
    that.setState({ fetchingStatus: true });

    that.setState({
      data: [...this.state.data, ...this.state.dummy.slice(old, that.page)],
      isLoading: false,
      fetchingStatus: false,
      setOnLoad: true,
    });
  };
  BottomView = () => {
    return (
      <View>
        {this.state.fetchingStatus ? (
          <ActivityIndicator
            size="large"
            color="#F44336"
            style={{ marginLeft: 6 }}
          />
        ) : null}
      </View>
    );
  };
  ItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  };

  render() {
    return (
      <View>
        {this.state.isLoading ? (
          <ActivityIndicator size="large" />
        ) : (
          <FlatList
            style={{ width: "100%" }}
            keyExtractor={(item, index) => index}
            data={this.state.data}
            ItemSeparatorComponent={this.ItemSeparator}
            onScrollEndDrag={() => console.log(" *********end")}
            onScrollBeginDrag={() => console.log(" *******start")}
            initialNumToRender={8}
            maxToRenderPerBatch={2}
            onEndReachedThreshold={0.1}
            onMomentumScrollBegin={() => {
              this.onEndReached = false;
            }}
            onEndReached={() => {
              if (!this.onEndReached) {
                this.apiCall(); // on end reached
                this.onEndReached = true;
              }
            }}
            renderItem={({ item, index }) => (
              <View>
                <Card>
                  <Text
                    style={{ justifyContent: "flex-start", fontWeight: "bold" }}
                  >
                    {item.name}
                  </Text>

                  <View style={styles.textview}>
                    <Text style={styles.orderno}>{item.order_no}</Text>
                    <Text style={styles.orderstatus}>{item.status}</Text>
                  </View>
                  <Text style={styles.amount}>{item.price}</Text>
                  <View style={styles.textview}>
                    <Text style={styles.orderno}>{item.date}</Text>
                  </View>
                </Card>
              </View>
            )}
            ListFooterComponent={this.BottomView}
          />
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  textview: {
    marginTop: 5,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  orderno: {
    flexDirection: "row",
    justifyContent: "flex-start",
  },
  orderstatus: {
    flexDirection: "row",
    justifyContent: "flex-end",
    color: "green",
  },
  ordercomplete: {
    flexDirection: "row",
    justifyContent: "flex-end",
    color: "red",
  },
  amount: {
    justifyContent: "flex-start",
    marginTop: 5,
  },
});
export default InfiniteScroll;

如能提供解决方案，将不胜感激。谢谢

Answer 1

这里的事情是你正在设置你的虚拟数据并接下来调用 apiCall，当你调用 apiCall 时虚拟数据还没有更新，并且虚拟数据显示为一个空数组apiCall，你只需要在调用函数之前强制等待，只需改变一下：

this.setState(
  {
    dummy: toput,
  },
  () => {
    console.log(this.state.dummy);
  }
);
this.apiCall();

对此：

this.setState(
  {
    dummy: toput
  },
  () => {
    this.apiCall();
  }
);

我注意到的另一件事是你使用了一些不好的做法，比如直接在 class 上设置 valuse 而不是使用 state 和一些混乱的范围（that = this），我做了一些 updates/suggestions 在您的代码中可能有助于提高可读性：

  apiCall = () => {
    const newPage = this.state.page + 10;

    this.setState({
      data: [
        ...this.state.data,
        ...this.state.dummy.slice(this.state.page, newPage)
      ],
      isLoading: false,
      fetchingStatus: false,
      setOnLoad: true,
      page: newPage
    });
  };

我创建了一个完整的示例，因此您可以看到我在代码中所做的更多更新，这也可能对您有所帮助：

https://codesandbox.io/s/Whosebug-67166780-321ku?file=/src/App.js

FlatList 组件未显示结果

FlatList component is not showing result

javascript

reactjs

react-native

react-native-flatlist