Mengapa komponen React saya dipaparkan dua kali?

Question

Saya tidak tahu mengapa komponen React saya dipaparkan dua kali. Jadi saya mengekstrak nombor telefon daripada params dan menyimpannya ke dalam keadaan supaya saya boleh mencarinya melalui Firestore. Segala-galanya nampaknya berfungsi dengan baik kecuali ia memaparkan dua kali...kali pertama nombor telefon dan titik sifar diberikan. Semua data dipaparkan dengan betul pada pemaparan kedua. Bolehkah sesiapa membimbing saya kepada penyelesaian?

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

Anda menjalankan aplikasi anda dalam mod ketat. Pergi ke index.js dan ulas teg mod ketat. Anda akan menemui rendering.

Peristiwa ini adalah ciri yang disengajakan oleh React.StrictMode. Ia hanya berlaku dalam mod pembangunan dan sepatutnya membantu mengesan kesan sampingan yang tidak diingini semasa fasa pemaparan.

Daripada dokumentasi:

^ dalam kes ini ialah fungsi render.

Dokumentasi rasmi tentang perkara yang boleh menyebabkan pemaparan semula apabila menggunakan React.StrictMode:

https://reactjs.org/docs/strict-mode.html#Kesan kesan sampingan yang tidak dijangka