Recyclerlisview not show new data

[databasemanager0]

trafficstars

Hello,

I have an array. If new datas come in the array the recyclerlistview show not the new data only the old one. But Why ?

`import React, { useState, useEffect, forwardRef, memo } from 'react'; import { StyleSheet, Text, TextInput, View, TouchableOpacity, Image, Dimensions } from 'react-native'; import { TouchableWithoutFeedback } from 'react-native-gesture-handler'; import { RecyclerListView, LayoutProvider, DataProvider } from 'recyclerlistview'; import { useSelector, useDispatch } from 'react-redux'; import { AntDesign } from '@expo/vector-icons'; import { addAmountOnCartItem } from '../../../redux/slice/product/shopping_cart'; import faker from 'faker'; import ButtonWithoutLoader from '../../ButtonWithoutLoader';

const { width, height } = Dimensions.get('window');

const Shopping_cart_list = ({ datas }) => { const dispatch = useDispatch();

const [update, updateRecycler] = useState(false);

const handleChange = (e, product_id) => { dispatch(addAmountOnCartItem({ value: e, product_id })); updateRecycler(prevState => !prevState); };

const [dataProvider, setDataProvider] = useState(new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(datas));

const [layoutProvider, setLayoutProvider] = useState( new LayoutProvider((i) => { return dataProvider.getDataForIndex(i).type; }, (type, dim) => { switch(type) { case 'NORMAL': dim.height = 250; dim.width = width * 0.9; break; default: dim.height = 0; dim.width = 0; break; } }) );

const rowRenderer = (type, data) => { const { product_id, product_name, price, product_image, amount, username } = data.item; return ( <TouchableWithoutFeedback style={{height: 250, backgroundColor: '#fff'}}> <View style={styles.header}> <TouchableOpacity style={styles.profile_info}> <Image source={{uri: faker.image.avatar()}} resizeMode="contain" style={styles.profile_image} /> <Text style={styles.username}>{ username }</Text> </TouchableOpacity> <TouchableOpacity> <AntDesign name="setting" size={24} color="#444" /> </TouchableOpacity> </View> <View style={styles.mainContainer}> <Image source={{uri: product_image}} style={styles.image} /> <View> <Text style={styles.text}>{product_name}</Text> <Text style={styles.text}>Preis: {price}</Text> <View style={{flexDirection: 'row', alignItems: 'center'}}> <Text style={styles.text}>Anzahl: </Text> <AntDesign name="minussquareo" style={{marginRight: 6}} size={24} color="black" /> <TextInput value={amount.toString()} onChangeText={e => handleChange(e, product_id)} style={{height: 28, width: 28, borderRadius: 4, textAlign: 'center', backgroundColor: '#eee'}} /> <AntDesign name="plussquareo" style={{marginLeft: 6}} size={24} color="black" /> </View> </View> </View> <View style={[styles.header, { marginTop: 4 }]}> <ButtonWithoutLoader onPress={() => updateRecycler(prevState => !prevState)} title="Jetzt Kaufen!" width={width * 0.9} /> </View> </TouchableWithoutFeedback> ) };

return ( <View style={{flex: 1}}> <RecyclerListView dataProvider={dataProvider} layoutProvider={layoutProvider} rowRenderer={rowRenderer} style={{marginLeft: width * 0.05, marginRight: width * 0.05}} extendedState={update} scrollViewProps={{showsVerticalScrollIndicator: false}} /> </View> ) };`

[mathias-berg]

As far as I can see, you are not updating your dataProvider.

You should be doing something like this to update it.

useEffect(() => { setDataProvider(currentDataProvider => currentDataProvider.cloneWithRows(datas)); }, [datas]);