Can only update a mounted or mounting component

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/ )

1 Like

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.