ReactJS onClick 函數未正確觸發

Question

如果我添加 e.preventDefault()，函數只會正確觸發。 但是，我希望它在用戶提交表單后將用戶推送到“/”。 這是我試圖觸發的功能：

onAddPoints = (e) => {
    e.preventDefault();
    //history.push('/');
    let { phoneNumber, points, onPointsChange } = this.state;

    //convert string to int -> calculate update points
    let p1 = Number(points);
    let p2 = Number(onPointsChange);
    const updatedPoints = p1 + p2; 

    //update points
    firebase.auth().onAuthStateChanged((user) => {
        if(user) {
            const docRef = database.collection('users').doc(user.uid).collection('customers').doc(phoneNumber);
            docRef.update({
                "points": updatedPoints
            }).then(() => {
                console.log('success');
            }).catch((error) => {
                console.log(error);
            })
        } else {
            window.location.href = '/';
        }
    });
}

Answer 1

您需要等待查看請求的結果。

如果請求是正確的，那么如果您將用戶發送到另一個頁面就可以了，但是如果請求出錯，那么您必須告訴用戶出現問題。

firebase.auth().onAuthStateChanged((user) => {
    if(user) {
        const docRef = database.collection('users').doc(user.uid).collection('customers').doc(phoneNumber);
        docRef.update({
            "points": updatedPoints
        }).then(() => {
            history.push('/');
            console.log('success');
        }).catch((error) => {
            console.log(error);
        })
    } else {
        window.location.href = '/';
    }
});

如果您使用e.preventDefeault()也可以，因為它會停止默認的表單操作流程 onSubmit，該流程將轉到在action='./update.php'屬性中設置的頁面。 這通常用於 php 應用程序，例如通過將所有輸入信息發送到該update.php 。