React Native：一个信号推送通知设置状态

Question

我已经在我的 React Native 应用程序上安装了 OneSignal package，并希望将通知插入到我的状态中，以便可以在 class 中访问该通知。

到目前为止，我尝试这样做：

import OneSignal from "react-native-onesignal";

export default class SuperScreen extends Component {
    constructor(props) {
    super(props);
    this.state = {
      showPopup: false,
      pushNotification: null
    };

    OneSignal.init("<mykey>", {kOSSettingsKeyAutoPrompt: true});
    OneSignal.inFocusDisplaying(0);

    OneSignal.addEventListener("opened", this.onOpened);
    OneSignal.addEventListener("ids", this.onIds);
}

componentWillUnmount() {
    OneSignal.removeEventListener("opened", this.onOpened);
}

onOpened(openResult) {
    console.log("Message: ", openResult.notification.payload.body);
    console.log("Data: ", openResult.notification.payload.additionalData);
    console.log("isActive: ", openResult.notification.isAppInFocus);
    console.log("openResult: ", openResult);

    this.setState({ pushNotification: openResult});
}

但我总是得到 this.setState(...) is not a function。所以我添加了修改行：

this.setState({ pushNotification: openResult}).bind(this);

然而，我仍然得到相同的结果。我只是想更新状态。你们能解释一下为什么我会收到此错误消息吗？我该如何解决？

谨致问候，谢谢！

Answer 1

发生该错误是因为 onOpened 未绑定到 class 组件，因此 onOpened 中 this 的值不是您期望的值（它只是null).

为了修复它，您可以使用 class 属性 + 箭头函数

onOpened = (openResult) => {
    console.log("Message: ", openResult.notification.payload.body);
    console.log("Data: ", openResult.notification.payload.additionalData);
    console.log("isActive: ", openResult.notification.isAppInFocus);
    console.log("openResult: ", openResult);

    this.setState({ pushNotification: openResult});
}

或者您可以使用 .bind(this)

在构造函数中绑定它

 constructor(props) {
    super(props);
    this.state = {
      showPopup: false,
      pushNotification: null
    };

    this.onOpened = this.onOpened.bind(this); // <--- here

    OneSignal.init("<mykey>", {kOSSettingsKeyAutoPrompt: true});
    OneSignal.inFocusDisplaying(0);

    OneSignal.addEventListener("opened", this.onOpened);
    OneSignal.addEventListener("ids", this.onIds);
}

React Native：一个信号推送通知设置状态

React Native: One Signal push notification set state

reactjs

react-native

onesignal

setstate