Pourquoi mon composant React s'affiche-t-il deux fois ?

Question

Je ne sais pas pourquoi mon composant React s'affiche deux fois. J'extrais donc le numéro de téléphone des paramètres et je l'enregistre dans l'état afin de pouvoir le rechercher via Firestore. Tout semble bien fonctionner sauf que le rendu est effectué deux fois... la première fois, le numéro de téléphone et le point zéro sont rendus. Toutes les données sont affichées correctement sur le deuxième rendu. Quelqu'un peut-il me guider vers une solution ?

class Update extends Component {
constructor(props) {
    super(props);
    const { match } = this.props;
    this.state = {
        phoneNumber: match.params.phoneNumber,
        points: 0,
        error: ''
    }
}

getPoints = () => {
    firebase.auth().onAuthStateChanged((user) => {
        if(user) {
            const docRef = database.collection('users').doc(user.uid).collection('customers').doc(this.state.phoneNumber);
            docRef.get().then((doc) => {
                if (doc.exists) {
                const points = doc.data().points;
                this.setState(() => ({ points }));
                console.log(points);
                } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
                const error = 'This phone number is not registered yet...'
                this.setState(() => ({ error }));
                }
                }).catch(function(error) {
                console.log("Error getting document:", error);
                });
        } else {
            history.push('/')
        }
    });
}

componentDidMount() {
    if(this.state.phoneNumber) {
        this.getPoints();
    } else {
        return null;
    }
}

render() {
    return (
        <div>
            <div>
                <p>{this.state.phoneNumber} has {this.state.points} points...</p>
                <p>Would you like to redeem or add points?</p>
            </div>
            <div>
                <button>Redeem Points</button>
                <button>Add Points</button>
            </div>
        </div>
    );
  }
}

export default Update;

Answer 1

Vous exécutez votre application en mode strict. Accédez à index.js et commentez la balise de mode strict. Vous trouverez un rendu.

Cet événement est une fonctionnalité intentionnelle de React.StrictMode. Cela ne se produit qu'en mode développement et devrait aider à détecter les effets secondaires involontaires pendant la phase de rendu.

D'après la documentation :

^ dans ce cas est la fonction render.

Documentation officielle sur ce qui peut provoquer un nouveau rendu lors de l'utilisation de React.StrictMode :

https://reactjs.org/docs/strict-mode.html#Détecter les effets secondaires inattendus