Mengapa komponen React saya dipaparkan dua kali?
P粉268654873
P粉268654873 2023-10-16 12:47:00
0
1
695

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;

P粉268654873
P粉268654873

membalas semua(1)
P粉608647033

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan