V
V
vimirtv2018-10-02 15:12:36
React Native
vimirtv, 2018-10-02 15:12:36

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

}

The component where the apploader is called
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

1 answer(s)
V
Vladimir Proskurin, 2018-10-02
@vimirtv

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 question

Ask a Question

731 491 924 answers to any question