How to return data from function by fetch() in React-Native - react-native

Question

I created a FlastList for my posts where I calling a function that made for returning the likes of the post but it's giving me an error that is :
[Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
in RCTView (at Testing.js:196)
in TouchableWithoutFeedback (at Testing.js:185)
in RCTView (at Testing.js:184)
in RCTView (at Testing.js:165)
in TouchableWithoutFeedback (at Testing.js:160)
in RCTView (at VirtualizedList.js:1925)
in CellRenderer (at VirtualizedList.js:767)
in RCTView (at ScrollView.js:1038)
in RCTScrollView (at ScrollView.js:1178)
in ScrollView (at VirtualizedList.js:1183)
in VirtualizedList (at FlatList.js:676)
in FlatList (at Testing.js:151)
in RCTView (at Testing.js:147)
in Testing
in SceneView (at StackView.tsx:269)
in RCTView (at CardContainer.tsx:171)
in RCTView (at CardContainer.tsx:170)
in RCTView (at Card.tsx:455)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:442)
in PanGestureHandler (at Card.tsx:435)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:431)
in RCTView (at Card.tsx:424)
in Card (at CardContainer.tsx:138)
in CardContainer (at CardStack.tsx:503)
in RCTView (at CardStack.tsx:110)
in MaybeScreen (at CardStack.tsx:496)
in RCTView (at CardStack.tsx:93)
in MaybeScreenContainer (at CardStack.tsx:403)
in CardStack (at StackView.tsx:384)
in KeyboardManager (at StackView.tsx:382)
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
in SafeAreaProviderCompat (at StackView.tsx:379)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Unknown (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)]
fetch() is working properly I'm getting the likes but when I return the data I got that error.
I don't understand why I'm getting this error and how it will remove and how I'll get posts like on my app.
Here is my code.
likes = async item => {
const response = await fetch(
'http://192.168.0.3:1234/post_likes?post_id=' + item.id,
);
const data = await response.json();
let likes = data[0].likes;
console.log(likes);
return <Text>{likes}</Text>;
};
render() {
return (
<View style={styles.container}>
<HeaderIcon />
{this.state.loading && <ActivityIndicator size="large" color="cyan" />}
<FlatList
onScroll={({nativeEvent}) => {
if (this.isCloseToBottom(nativeEvent)) {
this.getMorePost();
}
}}
data={this.state.post}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => (
<TouchableWithoutFeedback
style={styles.main}
onPress={() => {
this.openPost(item);
}}>
<View style={styles.main}>
<View style={styles.row}>
{/* <View>{this.img(item)}</View> */}
<View>
<Image
style={styles.profilePic}
source={{uri: item.featuredImage}}
/>
</View>
<View>
<Text style={styles.title}>{item.post_title}</Text>
</View>
</View>
<Image
// resizeMode="stretch"
style={styles.image}
source={{uri: item.featuredImage}}
/>
<View>
<TouchableWithoutFeedback
onPress={() => {
Share.share({
title: item.post_title,
message:
item.section_seo_url +
item.post_content.replace(/<[^>]*>| /g, ' ') +
item.featuredImage,
url: item.featuredImage,
});
}}>
<View
style={{
justifyContent: 'center',
padding: 10,
flexDirection: 'row',
}}>
<Image
source={require('../image/wlogo.png')}
style={{height: 40, width: 40, paddingLeft: 50}}
/>
{this.likes(item)}
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
);
}
}

Answer 1

As per me here you are making multiple api calls
Instead of that you can get your posts data with your likes from backend in simple
one api call.
You just need to add join query with your likes table in your get-posts request
which will return all your post with likes
So, you will get your all post with likes in one api call instead of these much
of calls.
Which is good practise for us.it will increase your app performance as well as
less api calls so it is good for server as well
Solution is like
add one more field likes to your post table
what you can do is when user like/dislike your post then get your likes
from post table and increment by one else decrement by one as per user
like/dislike and update back to post table.