Gabotronix's avatar

React Native: FlatList not updating after pushing new items to array

Hi everybody, I have a reusable FlatList component which triggers an API call after I scroll to bottom of list, after that I update the data property pushing new items into array but my FlatList is not updating, only items showing are the initial ones...

The important part is here, where I clone my data array with lodash and push new items, flatlist not updating tho...

try 
            {
                let response = await http.get(env.BASE_URL+'/api/venuereviews', { page : 1, paginate : 3});
                var clone = _.cloneDeep(data);
                clone.push(response.data.data.data);
                setData(clone); //Updating data but list is not re-rendering
            } 
            catch (error)
            {
                throw error;
            }

Here is my full FlatList component:

import _ from 'lodash';

export default RList1 = observer((props) => 
{
    
    const [ data, setData ] = useState([]);
    const { ...rest } = props;

    useEffect(() => {
        console.log('RList1 mounted');
        if(props.data && props.data.length > 0)
        {
            var clone = _.cloneDeep(props.data);
            setData(clone);
        }
    }, []);

    const onEndReached = async () =>
    {
            try 
            {
                let response = await http.get(env.BASE_URL+'/api/venuereviews', { page : 1, paginate : 3});
                var clone = _.cloneDeep(data);
                clone.push(response.data.data.data);
                setData(clone); //Updating data but list is not re-rendering
            } 
            catch (error)
            {
                throw error;
            }
    };

    
    return(
    <View style={{ flex:1 }}>
        <FlatList  style={{ width:'100%',backgroundColor:'rgb(245,245,245)'}}  data={data} keyExtractor={item => item.id.toString()}
        onEndReached={ ()=>{ onEndReached() } }
        {...rest}
        />
    </View>
    );
        

});

In parent :

const itemView = ({ item, index }) => 
    {
        return <ReviewCard3 item={item} />
    };

<RList1 onEndReachedAction={venueReviewStore.list} data={reviews} renderItem={itemView}></RList1>
0 likes
1 reply
Najuas's avatar

Hi friend, I must be too late for this but any way you can setState the array this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) this is for class component

Looking you code your's should be like this: setData([ ...data, ...clone ]);

Some Examples that i took from some sites: const oldArray = ['peter piper', 'picked a pair'] const finalArray = [...oldArray, 'of pickle pepper'] console.log(finalArray) // (3) ["peter piper", "picked a pair", "of pickle pepper"]

// Class Component this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

https://www.codegrepper.com/code-examples/javascript/how+to+update+an+array+in+react+state

Please or to participate in this conversation.