错误:无效的挂钩调用。挂钩只能在功能组件的主体内部调用。 (React-hooks React-native)

时间:2020-07-30 09:43:10

标签: react-native react-hooks

以前,我曾尝试将以下代码更改为React Hooks。

async startService() {
        if (Platform.OS !== 'android') {
            console.log('Only Android platform is supported');
            return;
        }
        if (Platform.Version >= 26) {
            const channelConfig = {
                id: 'ForegroundServiceChannel',
                name: 'Notification Channel',
                description: 'Notification Channel for Foreground Service',
                enableVibration: true,
                importance: 2
            };
            await VIForegroundService.createNotificationChannel(channelConfig);
        }
    }

这是我一直试图使其成为反应挂钩的代码:

function foregroundService () {
    
    useEffect(() => {
      async function startService() {
        if (Platform.OS !== 'android') {
          console.log('Only Android platform is supported');
          return;
        }
        if (Platform.Version >= 26) {
            const channelConfig = {
                id: 'ForegroundServiceChannel',
                name: 'Notification Channel',
                description: 'Notification Channel for Foreground Service',
                enableVibration: false,
                importance: 2
            };
            await VIForegroundService.createNotificationChannel(channelConfig);
        }
        const notificationConfig = {
            id: 3456,
            title: 'Foreground Service',
            text: 'Foreground service is running',
            icon: 'ic_notification',
            priority: 0
        };
        if (Platform.Version >= 26) {
            notificationConfig.channelId = 'ForegroundServiceChannel';
        }
        await VIForegroundService.startService(notificationConfig);
      };

      startService();
    }, [])
 };

,我得到一个错误: 错误:无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一:

  1. 您可能使用了不匹配的React和渲染器版本(例如React DOM)
  2. 您可能正在违反挂钩规则
  3. 您可能在同一应用中拥有多个React副本

我还是这个React的新手

1 个答案:

答案 0 :(得分:0)

import React, { useEffect } from 'react';

在此文件中导入反应并为此函数返回null,它将起作用。 为什么会这样呢? ->在上面创建了一个函数,并且为了将其理解为功能组件,需要在其顶部进行导入,并返回null,因为此函数中没有任何内容可以呈现。