Блог

У меня есть повторно используемый компонент FlatList, который запускает вызов API после прокрутки до конца списка, после чего я обновляю свойство data, помещая новые элементы в массив, но мой FlatList не обновляется, отображаются только начальные элементы…

Важная часть здесь, где я клонирую свой массив данных с помощью Lodash и добавляю новые элементы, плоский список не обновляется…

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

Вот мой полный компонент FlatList:

 import _ from 'lodash';

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

    useEffect(() => {
        console.log('RList1 mounted');
        if(props.data amp;amp; 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>
    );
        

});
 

В родительском :

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

<RList1 onEndReachedAction={venueReviewStore.list} data={reviews} renderItem={itemView}></RList1>