时间戳

首页 > 解决方案 > react-native 类组件中的替代 useState

reactjs - react-native 类组件中的替代 useState

问题描述

我知道我不能useState在类组件中使用，但是我试图在我的应用程序中复制这个教程。他们使用了与我不同的功能组件。

他们在教程中的 App.js是这样的：

const App = () => {

  useEffect(()=>{
    fcmService.registerAppWithFCM();
    fcmService.register(onRegister, onNotification, onOpenNotification);
    localNotificationService.configure(onOpenNotification)
  },[])


  const onRegister = (token) => {
    console.log("[App] Token", token);
  }

  const onNotification = (notify) => {
    // console.log("[App] onNotification", notify);
    const options = {
      soundName: 'default',
      playSound: true,
    }

    localNotificationService.showNotification(
      0,
      notify.notification.title,
      notify.notification.body,
      notify,
      options,
    )
  }

  const onOpenNotification = async (notify) => {
  
    console.log('notify', notify);
  }

所以基本上，const onOpenNotification, const onRegister,const onNotification在导入到 App.js 的另一个文件中被调用。我尝试将它们添加到我的 App.js 中，例如：

class App extends Component {
   componentDidMount() {
    fcmService.registerAppWithFCM();
    fcmService.register(onRegister, onNotification, onOpenNotification);
    localNotificationService.configure(onOpenNotification)
    const onRegister = (token) => {
      console.log("[App] Token", token);
    }
  
    const onNotification = (notify) => {
      // console.log("[App] onNotification", notify);
      const options = {
        soundName: 'default',
        playSound: true,
      }
  
      localNotificationService.showNotification(
        0,
        notify.notification.title,
        notify.notification.body,
        notify,
        options,
      )
    }
  
    const onOpenNotification = async (notify) => {
    
      console.log('notify', notify);
    }
  }
}

我的 console.log 显示这些错误：

 LOG  [FCMService] getInitialNotification getInitialNotification null
 LOG  [LocalNotificationService] onRegister: {"os": "android", "token": "emA0hq4KCMq0j:APA91bEWbOUXjxdIs_s2ksSbjwxhdMVfr35y9sZBUIYX72Q9obU7daQw4zI-a0qn6KsvxWvGtQoEdPlTq5l98trb-yhmtARDcliqAayi_r0K8f_"}
 LOG  [FCMService] getToken Rejected [TypeError: onRegister is not a function. (In 'onRegister(fcmToken)', 'onRegister' is undefined)]

我猜那是因为const functions()结构不正确，复制本教程的最佳方法是什么，最好是如果我不必更改为功能组件，我认为我无法提供所有信息需要在这里提供帮助，但如果您能花一些时间看看我谈到的 2 个导入文件const onRegister的结构以及它们如何在 App.js 中调用，我将不胜感激

谢谢！

标签： reactjsreact-nativereact-hooks

解决方案

编辑：更新代码

尝试将方法移动到类级别。

class App extends Component {

    componentDidMount() {
        fcmService.registerAppWithFCM();
        fcmService.register(this.onRegister, this.onNotification, this.onOpenNotification);
        localNotificationService.configure(this.onOpenNotification)
    }

    onRegister = (token) => {
      console.log("[App] Token", token);
    }

    onNotification = (notify) => {
      // console.log("[App] onNotification", notify);
      const options = {
          soundName: 'default',
          playSound: true,
      }

      localNotificationService.showNotification(0,notify.notification.title,
            notify.notification.body, notify, options,)
    }

    onOpenNotification = async (notify) => {
        console.log('notify', notify);
    }
}

推荐阅读