如何修复“index.js:1446 警告：无法在未安装的组件上调用 setState（或 forceUpdate）...”在 ReactJS 中

Question

I am a beginner in ReactJS. I want to build a react app for my own use. Indeed, in my web page, I have three button, one for increment a field in my firebase database, on in order to increment an other field in my database and finally on to clean the two fields and the UI. These button work but when I leave the page to go to another and I come, the console show these error "index.js:1446 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method".

So, I searched a solution in the internet, and I only found solutions wich tell me to set a variable isMounted and change her in componentDidMount and componentWillUnmount. But the problem is still here. So I returned to my first code. Thanks for your help, sorry for bad english, Iam french.

import React, { Component } from 'react';
import { Button } from 'antd';
import Nav from '../component/Nav';
import firebase from 'firebase';
import config from '../config/config';

class Recap extends Component{
    constructor(){
        super();
        !firebase.apps.length ? this.app = firebase.initializeApp(config) : this.app = firebase.app();
    this.database = this.app.database().ref().child('scoreMensuel');
    this.state={
        scoreMensuel : {
        },
        loading:true,
    } 
    this.style={
        styleTable:{width:'50%'},
        styleCell:{border:'1px solid black'},
        styleScoreField:{border:'1px solid black', height:'300px'}
    }
}

componentWillMount(){
    this.database.on('value', snapshot => {
        this.setState({
            scoreMensuel: snapshot.val()
        });
        this.setState({loading:false});
    });
}

addScore = event =>{
console.log(event.target.id);
    if(event.target.id === 'entrainementOk'){
        this.database.child('TeamGainz').transaction(function(currentValue) {
            return ( (currentValue) + 1);
        }, function(err, committed, ss) {
            if( err ) {
            return err;
            }
        });
    }else if(event.target.id === 'entrainementNotOk'){
        this.database.child('TeamKeh').transaction(function(currentValue) {
            return ((currentValue) + 1);
        }, function(err, committed, ss) {
            if( err ) {
            return err;
            }
        });
    }
}

clearScore = event =>{
    this.database.child('TeamGainz').transaction(function(currentValue) {
        return ( (currentValue) - (currentValue));
    });
    this.database.child('TeamKeh').transaction(function(currentValue) {
        return ( (currentValue) - (currentValue));
    });
}

render(){
    const loading = this.state.loading;
    if(loading){
        return(<h1>Chargement...</h1>)
    }
    return(
        <div className="reacp">
            <Nav/>
            <h1>Récapitulatif Mensuel</h1>
            <table style={this.style.styleTable}>
                <tbody className="tableauTeam">
                    <tr>
                        <td style={this.style.styleCell}>Team Gainz</td>
                        <td style={this.style.styleCell}>Team Keh</td>
                    </tr>
                    <tr>
                        <td 
                            style={this.style.styleScoreField} id='idTeam1'> {this.state.scoreMensuel.TeamGainz}
                            <Button type='danger' id='entrainementOk'onClick={this.addScore}>Entraînement Effectué</Button>
                        </td>
                        <td style={this.style.styleScoreField} id='idTeam2'>{this.state.scoreMensuel.TeamKeh} 
                            <Button type='danger' id='entrainementNotOk' onClick={this.addScore}>Entraînement Raté</Button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <Button type='primary' style={{margin:'10px'}} onClick={this.clearScore}>Nettoyer le tableau</Button>
        </div>
    );
}
}

export default Recap;

Even if this warning don't affect buttons, I want to understand why this warning comes.

Answer 1

You shouldn't call setState in componentWillMount . Instead, call it in componentDidMount :

componentWillMount(){
// ^^^^^^^^^^^^^^^ change this to componentDidMount
    this.database.on('value', snapshot => {
        this.setState({
            scoreMensuel: snapshot.val()
        });
        this.setState({loading:false});
    });
}

The reason this is a problem is because calling setState triggers a re-renderer and if we call it in componentWillMount , we might trigger a re-render of an unmounted component anywhere in the rendering flow.

Since you are triggering the change in state based on a (presumably) async callback, this means that you have a race-condition between when does your data arrive and when does React render.

In fact, React has deprecated componentWillMount and currently ships with UNSAFE_componentWillMount()

React docs:

Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead.