javascript - 无法在 if 语句中设置状态

Question

尝试更新 if 语句中的 react 状态。

当快照返回 true -> 将状态从 true 切换为 false。当快照返回 false 时 -> 将状态从 false 切换为 true。

如果我在 if 语句上方使用 console.log(this.state.notification)，一切都很好，当我在 if 语句中登录或想要编辑时，我不断收到错误消息:[未处理的 promise 拒绝:TypeError:undefined 不是一个对象(评估'this.state.notification')]

我尝试使用绑定(bind)但没有成功。

请帮忙!

state = {
    darkMode: true,
    notification: true
};


toggleNotification = async () => {

    console.log(this.state.notification);       // no error

    const currentUserId = firebase.auth().currentUser.uid;
    const ref = firebase.database().ref("users/" + currentUserId + "/notification");

    ref.once("value").then(function(snapshot) {
      if(snapshot){
        this.setState({ notification: false })  // error
        console.log(this.state.notification);   // error
        console.log('First check')
      } else {
        this.setState({ notification: true })   // error
        console.log(this.state.notification);   // error
        console.log('Second check')
      }
    });
};

Answer 1

这里有三个问题(也许是四个)::-)

1. this 不是您在 then 回调中所期望的。您可以使用 this question 中的答案解决该问题，但是请参阅#2:

2. 不要在 async 函数中对 promise 使用 then；使用 await。

3. “Unhandled promise rejection”告诉我们没有处理来自您的 toggleNotification 函数的错误。请记住，async 函数会返回 promises，并且 promises 的基本规则之一是:处理错误，或将 promise 链传播到需要执行的操作。

上面的#1 被#2 取代。以下是您如何在该函数中实现#2:

toggleNotification = async () => {

    console.log(this.state.notification);

    const currentUserId = firebase.auth().currentUser.uid;
    const ref = firebase.database().ref("users/" + currentUserId + "/notification");

    const snapshot = await ref.once("value"); // <=====
    if(snapshot){
        this.setState({ notification: false });
        console.log(this.state.notification);
        console.log('First check')
    } else {
        this.setState({ notification: true });
        console.log(this.state.notification);
        console.log('Second check')
    }
};

(#3 你在调用 toggleNotification 的地方做。)

---

我注意到您在调用 setState 更新它之后记录了 this.state.notification。请记住 state updates are asynchronous ，您的状态在 log 调用时不会改变。如果要记录更新状态，请使用完成回调(setState 的第二个参数:

this.setState({notification: false}, () => {
    console.log(this.state);
});

(当然，如果您有意记录 this.state.notification 的旧值，这很公平，但最好在 setState 之前执行此操作如果这是您的意图，请调用，否则很容易被误读。)

---

如果你愿意，你可以避免 if/else 中的重复代码

const notification = !await ref.once("value");
// Notice -----------^
this.setState({notification}, () => {
    console.log(this.state.notification);
    console.log(notification ? 'Second check' : 'First check')
});