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 ( 
 
 
{this.state.phoneNumber} has {this.state.points} points...
 
Would you like to redeem or add points?
 
 
 Redeem Points Add Points 
 
 ); } } export default Update;