React Native FlatList 组件数据在 firebase 数据调用后不断刷新，Firebase 数据显示不一致

Question

I am trying to build a flatlist in react native where posts are displayed with their information and the information of their user. All of this data is stored in firebase. I am calling this data into a data state variable with the following function:

getPosts = (limit = 20) => {
    var list = [];
    firebase.firestore()
      .collection("posts").get().then((querySnapshot) => {
        querySnapshot.forEach(async (doc) => {
          var tempList = doc.data();
          const usersQs = await firebase.firestore().collection("users").where('email', '==', doc.data().email).get();
          usersQs.forEach(doc2 => {
            Object.assign(tempList, {
              "userName": doc2.data().name,
              "avatar": doc2.data().avatar
            });
          });

          list.push(tempList);
        });
        list.sort(function(a, b) {
          var c = b.timestamp;
          var d = a.timestamp;
          return c - d;
        });
        this.setState({
          data: list,
          fullData: list
        });
      });

    return new Promise((resolve, reject) => {
      this.func;
      resolve(_.take(this.state.fullData, limit));
    });
  };

This function loads the correct data into the data state, but after I try to load this data into the Flatlist, which looks like this:

renderPost = post => {
    return (
      <View style={styles.feedItem}>
        <Image source={post.avatar} style={styles.avatar} />
        <View style={{ flex: 1 }}>
          <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
            <View>
              <Text style={styles.name}>{post.userName}</Text>
              <Text style={styles.timestamp}>{moment(post.timestamp).fromNow()}</Text>
            </View>

            <Ionicons name="ios-more" size={24} color="#73788B" />
          </View>

          <Text style={styles.post}>{post.text}</Text>

          <Image source={post.image && {uri: post.image}} style={styles.postImage} resizeMode="cover" />

          <View style={{ flexDirection: "row" }}>
            <Ionicons name="ios-heart-empty" size={24} color="#73788B" style={{ marginRight: 16 }} />
            <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
          </View>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Feed</Text>
        </View>

        <FlatList
          style={styles.feed}
          data={this.state.data}
          renderItem={({ item }) => this.renderPost(item)}
          keyExtractor={item => item.timestamp.toString()}
          showsVerticalScrollIndicator={false}
          ListFooterComponent={this.renderFooter}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh}
          onEndReached={this.handleLoadMore}
          onEndThreshold={100}
        />
      </View>

I call the getPosts function in the following code, which runs on reload and refresh:

  componentDidMount() {
    this.makeRemoteRequest();
  }
...
  makeRemoteRequest = _.debounce(() => {
    this.setState({ loading: true });

    this.getPosts(this.state.postNumLoad)
      .then(posts => {
        this.setState({
          loading: false,
          data: posts,
          fullData: posts,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false, refreshing: false });
      });
  }, 250);

  handleRefresh = () => {
    this.setState({
      refreshing: true
    }, () => {
      this.makeRemoteRequest();
    });
  };

  handleLoadMore = () => {
    this.setState({
      postNumLoad: this.state.postNumLoad + 20
    }, () => {
      this.makeRemoteRequest();
    });
  };

This data flashes after I reload it, but it does not stay on the screen consistently. When I don't reload, nothing appears on the screen. My state looks like the following:

constructor(props) {
    super(props);

    this.state = {
      data: [],
      downloadImage: '../assets/images/temporaryProfilePicture.jpg',
      loading: false,
      error: null,
      fullData: [],
      refreshing: false,
      postNumLoad: 20
    };
  }

My question overall is: How would I make the data in the flatlist stay constantly on the screen without always reloading and flashing the data? Any help would be largely appreciated. Thank you in advance!

Answer 1

In my experience, FlatList performs better if you put a setTimeout in the function that's called by onEndReached. I have experienced FlatLists constantly refreshing because it hasn't finished loading more data before onEndReached gets called again. FlatList is supposed to have something built in that prevents this being an issue, but it doesn't always work.

Using bounces={false} in FlatList can also help with this, since sometimes a bounce will cause onEndReached to be triggered twice in a row before the FlatList has finished updating.

Here's an example of a set of functions I use for onEndReached in one of my apps:

gettingData(){

   this.setState({refreshing: true, showFooter: true});

       this.GetMyData().then(() => {
       this.setState({refreshing: false, showFooter: false, loading: false});
   });

     }


 waitingForData(){

   setTimeout(() => {
     if(this.state.showFooter === false && this.state.listData.length > 0){
       //console.log('getting after waiting');
       this.gettingData();
     }else{
       //console.log('waiting again');
       this.waitingForData();
     }
   }, 15000)

 }

_onEndList = () => {

  if(this.state.showFooter === false && this.state.listData.length > 0){
    //console.log('getting');
    this.gettingData();


  }else{
//console.log('waiting');
    this.waitingForData();
  }

}

I'm not sure if your display issue is caused by the same thing or not. If that's still a problem after the constant refreshing is fixed try checking if it's a problem in both IOS and Android, or just one or the other.

I remember having an issue like that once on Android only. I fixed it by playing around with some styling choices that were conflicting with FlatList but I don't remember what exactly those were. They may have had to do with keeping overflow hidden if it's just the FlatList that's blank.

If the whole screen including all other components outside of FlatList also go blank, I think it may be that you need to wrap the whole screen in something with flex:1.