React Native Flastlist data not updating with concate the array for pagination

Question

I am using React Native Flatlist for pagination but unable to re-render after apply sorting or filter.

Simple appending working //setResult(response.data.response.products.data);

With Concinate not working // setResult([...result, ...response.data.response.products.data]);

Note: Also used extraData prop but not working...

import React, {useState, useEffect, useContext} from 'react'; import { SafeAreaView, View, Text, StyleSheet, FlatList, ActivityIndicator, } from 'react-native';

export default function GrSubCategoryLevel2(props) {
  const {navigation} = props;
  const [loading, setLoading] = useState(true);
  const [hasError, setHasError] = useState(false);
  const [result, setResult] = useState([]);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loadMore, setLoadMore] = useState(true);

  const [popularValue, setPopularValue] = useState(null);
  const [priceValue, setPriceValue] = useState('');

  useEffect(() => {
      fetchData(page);
    }
  }, []);


  const fetchData = async (page) => {
    if (loadMore) {
      const request = subCategoriesLevel2(page);
      try {
        const response = await axios({
          url: request.url,
          method: request.method,
          data: request.data,
          headers: {
            'Content-Type': 'application/json',
            'Accept-Language': 'en',
            Accept: 'application/json',
          },
        });
        if (!response.data.error) {
          setData(response.data.response);
          if (response.data.response.products.data.length > 0) {
            setResult([...result, ...response.data.response.products.data]);
            //setResult(response.data.response.products.data); 
            if (response.data.response.products.next_page_url !== null) {
              setPage(page + 1);
              setLoadMore(true);
            } else {
              setLoadMore(false);
            }
          }
          setLoading(false);
        }
      } catch (error) {
        if (error) {
          console.log('Error', error.message);
        }
      }
    }
  };

 

  const renderItem = ({item}) => (
    <SubCategoryProduct
      data={item}
      navigation={navigation}
    />
  );

  return (
      <SafeAreaView style={styles.container}>
        <Navbar navigation={navigation} />
        <View style={styles.container}>
            <View style={styles.container}>
              <View style={styles.subCategoryList}>
                <FlatList
                  data={result}
                  extraData={result}
                  renderItem={renderItem}
                  showsVerticalScrollIndicator={false}
                  columnWrapperStyle={{justifyContent: 'space-between'}}
                  numColumns={3}
                  keyExtractor={(item, index) => item.id}
                  onEndReached={() =>
                    fetchData()
                  }
                 
                  stickyHeaderIndices={[0]}
                  ListFooterComponent={
                    <View style={styles.loaderFooter}>
                      {loadMore && (
                        <ActivityIndicator
                          color={Colors.secondary}
                          size="small"
                        />
                      )}
                    </View>
                  }
                />
              </View>
            </View>
        </View>
      </SafeAreaView>
  );
}

Alok · Accepted Answer · 2022-05-19 11:03:34Z

0

I think what you're doing is not the right way of concatenating in using useState() hooks. You need to know that in order to update/concatenate, the right way is to:

Make a copy of the previous item, and add it to the list with an updated data.

// Here previousData is a copy of the previous list which is maintained in the state data
setResult(previousData => [...previousData, response.data.response.products.data]);

OR

setResult(previousData => {
    return [...previousData, response.data.response.products.data]
});

Appreciation: I like your work by the way Ajay. Pretty neat and professional, keep up the good work 👏🏻👏🏻

edited May 19, 2022 at 11:03

answered May 19, 2022 at 10:50

Alok

9,08814 gold badges63 silver badges104 bronze badges

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

2 Comments

Ajay Kumar Prasad Over a year ago

Not working, I think issues with Flatlist

Alok Over a year ago

Okay. I thought it was an update issue, hence, the above solution could have worked.

Collectives™ on Stack Overflow

React Native Flastlist data not updating with concate the array for pagination

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related