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

Shubham Khatri · Accepted Answer · 2020-05-07 06:29:21Z

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

answered May 7, 2020 at 6:29

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related