Answer the question
In order to leave comments, you need to log in
Why does the Can't call setState (or forceUpdate) on an unmounted component error occur?
How to get rid of the error in this case.
There is a preloader component that changes after three seconds.
I display it until I receive a response from the server. Three seconds later, the state of this application changes. But since the answer has already been received, I do not display it.
Preloader
export default class LoadingMask extends React.Component {
constructor(props) {
super(props)
this.state = {
togle: false
}
}
componentDidMount () {
setTimeout(() => this.setState({togle: true}), 3000)
}
render() {
return (
<View>
{this.state.togle ?
<View style={{flexDirection: 'row', justifyContent: "center", marginTop: 20,}}>
<Text style={{marginRight: 20, color: '#4488fe'}} onPress={this.props.action}>Попробовать еще раз?</Text>
<Ionicons name="md-refresh" size={20} color="#4488fe" />
</View>
: <ActivityIndicator size="large" color="#CCC" />
}
</View>
)
}
}
import LoadingMask from './components/mask_loader'
class Account_list extends Component {
constructor(props) {
super(props)
this.state = {
loading: true,
}
componentDidMount = async () => {
this.setState({
loading: false
})
}
render() {
return (
<View style={styles.container}>
{ this.state.loading ? <LoadingMask action={this.fetchData} /> : <Text>Компонент загружен</Text>
</View>
)
}
Answer the question
In order to leave comments, you need to log in
Remember the timer id, and in the componentWillUnmount method, delete the timer through clearTimeout
It will be something like this
export default class LoadingMask extends React.Component {
constructor(props) {
super(props)
this.state = {
togle: false
}
this._timeId = null;
}
componentDidMount () {
this._timeId = setTimeout(() => this.setState({togle: true}), 3000)
}
componentWillUnmount () {
clearTimeout(this._timeId);
}
render() {
return (
<View>
{this.state.togle ?
<View style={{flexDirection: 'row', justifyContent: "center", marginTop: 20,}}>
<Text style={{marginRight: 20, color: '#4488fe'}} onPress={this.props.action}>Попробовать еще раз?</Text>
<Ionicons name="md-refresh" size={20} color="#4488fe" />
</View>
: <ActivityIndicator size="large" color="#CCC" />
}
</View>
)
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question