Flatlist not rendering data properly even after getting data appended in React Native?

Question

I am adding data in flatlist in onMomentumScrollEnd, I recieved the data from my REST API still not getting data rendered properly.

        <FlatList
          onMomentumScrollEnd={() =>
            this.state.pageno <= this.state.maxPage
              ? this.getData('', 1, this.state.pageno + 1)
              : null
          }
          onEndReachedThreshold={0.5}
          data={this.state.responseData}
          ItemSeparatorComponent={this.ItemSeparatorLine}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={true}
          renderItem={({item}) => (this.renderMyItem(item)} 
        />

Here is the function for appending data which is getting data perfectly in this.state.responseData

getData(text, apiType, pageno) {
    this.showLoader();
    this.setState({
      pageno: pageno,
      search: text,
      type: apiType,
    });

    let data = {
      pageNo: pageno,
      type: apiType,
      search: text,
      sortedBy: '',
      sortedIn: 'DESC',
      filter: {},
    };

    const headers = {
      'X-Auth-Token': this.state.token,
      'Content-Type': 'application/json',
    };

    console.log(data);

    axios
      .post(PIDataApi, data, {headers: headers})
      .then(response => {
        this.setState({
          isLoading: false,
        });
        if (response.data.status != 2000) {
          Toast.show(response.data.error.errorMessage, Toast.SHORT);
        } else {
          if (response.data.data.resource != null) {
            let historyData = response.data.data.resource;
            console.log('api response:', historyData);
            if (this.state.pageno > 1) {
              this.setState({
                responseData: [...this.state.responseData, historyData],
                maxPage: response.data.data.maxPage,
              });
              console.log('responseData : ', this.state.responseData);
            } else {
              this.setState({
                responseData: historyData,
                maxPage: response.data.data.maxPage,
              });
            }
          } else {
            Toast.show(response.data.data.message, Toast.SHORT);
          }
        }
      })

      .catch(error => {
        console.error(error);
      });
  }

you can see how the data rendered in the list, even after getting data appended correctly

Answer 1

The response that you get from the axios request sends you historyData in the form of an array, however you are setting it in state directly without spreading

Also when you update state based on previous state, do make use of functional setState

  if (this.state.pageno > 1) {
          this.setState(prevState => ({
            responseData: [...prevState.responseData, ...historyData], // spread historyData here
            maxPage: response.data.data.maxPage,
          }));
        } else {
          this.setState({
            responseData: historyData,
            maxPage: response.data.data.maxPage,
          });
        }