I am getting the following error, would anyone please help me?
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
Hi-
Can you share your code? It’s really hard to help you without seeing what you’re doing. Ideally, post a link to a Snack in this thread. ( https://snack.expo.io/ )
Hello And thank you to reply
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: url} />
</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(url, fOpt)
const membersData = await res.json()
this.setState(state => ({ data: [...state.data, ...membersData], loading: false }), () => {
this.setState({ loadData: true })
})
} catch (error) {
this.setState({ error, loading: false, refreshing: false })
// Alert.alert("Error on home page", error)
}
}
renderFooterComponent() {
return !this.state.loading ? null : <ActivityIndicator size="large" />
}
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;
This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.