import React, { Component } from 'react';
import { View, Alert, ScrollView, FlatList, Platform, ActivityIndicator, Image } from 'react-native';
import { homecontainer } from "../styles"
import { Asset, AppLoading } from 'expo';
import { Container, Content, Text, List, ListItem, Body, Left, Right, Thumbnail, Icon } from 'native-base'
import { OptimizedFlatList } from 'react-native-optimized-flatlist'
import { NavigationActions } from 'react-navigation';
class Home extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
page: 1,
loading: false,
loadData: false,
error: null,
refreshing: false,
}
}
render() {
if (!this.state.loadData) {
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<ActivityIndicator size='large' />
</View>
)
}
return (
<View style={{
flex: 1,
backgroundColor: 'white'
}}>
<List>
<OptimizedFlatList
data={this.state.data}
keyExtractor={(k, i) => i}
onEndReached={() => this.handleEnd()}
onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.1}
ListFooterComponent={() => this.renderFooterComponent() }
refreshing={this.state.refreshing}
onRefresh={() => this.handleRefresh() }
renderItem={({ item }) =>
<ListItem avatar onPress={() => {
this.props.navigation.navigate('profile', { item })
}}>
<Left>
<Thumbnail key={item.id} source={{ uri: 'http://localhost/assets/' + item.phone + '.png' }} />
</Left>
<Body >
<Text>{item.name} {item.fname}</Text>
<Text note>{item.address}</Text>
</Body>
<Right>
<Text note>{item.mdate}</Text>
<Icon name="arrow-forward" />
</Right>
</ListItem>
}
/>
</List>
</View>
);
}
handleEnd() {
this.setState(state => ({ page: state.page + 1 }), () => this.fetchMembers())
}
async fetchMembers() {
this.setState({ loading: true })
const fOpt = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
'operation': 'paging',
'page': this.state.page
}),
}
try {
const res = await fetch('http://localhost/controller/MemberController.php', fOpt)
const membersData = await res.json()
this.setState(state => ({ data: [...state.data, ...membersData], loading: false }), () => {
if(this.state.page === 1){
this.setState({ loadData: true })
}
})
} catch (error) {
// this.setState({ error, loading: false, refreshing: false })
console.log("Home: "+error)
}
}
renderFooterComponent() {
return this.state.loading ? <ActivityIndicator size="large" /> : null
}
handleRefresh() {
this.setState(
{
page: 1,
refreshing: true
},
() => {
this.fetchMembers()
}
)
}
componentDidMount() {
this.fetchMembers()
let cnt = 0
if (!this.state.loadData) {
const interval = setInterval(() => {
cnt++
if (this.state.loadData) {
clearInterval(interval)
cnt = 0
}
if (cnt >= 1) {
this.fetchMembers()
}
}, 10000)
}
}
}
export default Home;
all dependencies i used
"expo": "^24.0.0",
"native-base": "^2.3.6",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-fit-image": "^1.5.4",
"react-native-optimized-flatlist": "^1.0.4",
"react-navigation": "^1.0.0-beta.26"
also some time I am getting this error:
Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Have you tried fixing those errors first? They may be the cause of the C++ error you’re later seeing.
For one, you should make sure not to call setState when your component may have been unmounted.
This can happen when you call setState in an async function: imagine that the async function is called and does some asynchronous work, like fetching data from the server, and then later calls setState. While the async function is fetching data, some components may be unmounted (ex: the user moved to another screen, or the list view discarded off-screen row components). You need to either cancel the code that calls setState when the component is unmounted or check that the component is still mounted before calling setState.
You also have a setInterval call that might modify state. setInterval is not aware of whether components are mounted or unmounted, so again, you are responsible for making sure your components are always mounted before calling setState on them.
1 Like
Thank you to reply
Would you please tell me if I remove Async and used simple fetch without async and await, then it will solve the problem or not.
Now i am not getting non-std c++ error, this went away by removing Alert.alert() from catch
But mounted or mounting component still exists.
and setInterval I used because of weak internet in my country when the list gets loaded may there is not internet, and because that i used setinterval until list gets updated then Ihe interval gets clear
Also it is not working properly on android device if there exists more than 5 item then the avatar dont display the thumbnail image just displays as black avatar when I scroll it then my app gets stoped.
I really dont know where is the problem on my code I check it several time.
fetch() is asynchronous since it performs I/O and that takes time. Even if you don’t use a JS async function, a Promise would still be asynchronous. To debug your code I would recommend starting from an empty app and adding one small feature at a time and testing it to discover when something doesn’t work.
1 Like
Ok thank you, I will do it
Hello,
Sorry to ask you again,
I have overcome all problems except this mounted unmounted problem,
First please tell me
What means mounted component?
What means unmounted component?
What means mounting component?
What means unmounting component?
How to check if componet mounted?
How to check if component unmounted?
How to check if component mounting?
How to check if component unmounting?
How to cancel setState before mounted, mounting, unmounted or unmounting?
How to cancel setState after mounted, mounting, unmounted or unmounting?
These questions are more specific to React rather than Expo. The React docs are one of the best places to look for more: https://reactjs.org/docs/state-and-lifecycle.html
1 Like
Thank you so much,
I found a way for expo networking, it is axios networking,
it has cancelable feature.
if you have any better suggestion, love to hear from you,
thank you again.
This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.