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。