Dec 24, 2020
0
Level 8
React Native: trying to pass a reference function via props
Hi everybody, I created a reusable FlatList component which implements pagination, I'm trying to pass via props a function which makes an axios call and retrieves data from backend to populate the FlatList, however I'm getting the following error:
TypeError: [endAction] is not a function
Also this one:
TypeError: [store][action] is not a function
This is how I pass props to my custom component:
<RList1 store='venueStore' action='getVenueReviews' endAction={venueStore.getVenueReviews} data={[]} renderItem={itemView}></RList1>
And this is how I call the function (two ways, both give me same TypeError...):
let response = [store][action]({ params : params });
let response = [endAction]({ params : params });
My full custom component, just in case:
export default RList1 = observer((props) =>
{
const [ data, setData ] = useState([]);
const [ loader, setLoader ] = useState(0);
const [ page, setPage ] = useState(1);
const [ paginate, setPaginate ] = useState(2);
const [ pagination, setPagination ] = useState(null);
const [ numberOfPages, setNumberOfPages ] = useState(10);
const { id=1,store,action,endAction, ...rest } = props;
useEffect(() => {
console.log('RList1 mounted');
onEndReached();
}, []);
const onEndReached = async () =>
{
if(page < numberOfPages)
{
setLoader(0);
try
{
setLoader(1);
console.log('fetching data');
let params = { id:id, page : page, paginate : paginate };
let response = [store][action]({ params : params });
//let response = [endAction]({ params : params });
setData([...data, ...response.data.data.data]);
setPagination(response.data.pagination);
setNumberOfPages(response.data.pagination.last_page);
setLoader(2);
}
catch (error)
{
setLoader(3);
throw error;
}
}
};
return(
<View style={{ flex:1 }}>
<FlatList style={{ flex:1,backgroundColor:'rgb(235,235,235)'}} data={data} keyExtractor={item => item.id.toString()} extraData={loader}
onEndReached={ ()=>{ onEndReached() } } onEndReachedThreshold={0.1}
{...rest}
/>
</View>
);
});
Please or to participate in this conversation.