混淆用 React Hooks React Native 替换答案

【问题标题】：confuse replacing with React Hooks React Native混淆用 React Hooks React Native 替换
【发布时间】：2020-11-19 18:14:16
【问题描述】：

我试图通过 React Hooks 的 if 条件进行异步等待。下面的代码是在我尝试将其变为 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);
        }
    }

我正试图将它变成 React Hooks

 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();
  }, []);

我也试图在我的 jsx 中这样调用它：

<Button onPress={() => this.startService()}>
      <Text>Tes</Text>
 </Button>

还是不行，是不是我写错了？

【问题讨论】：

标签： react-native if-statement async-await react-hooks

【解决方案1】：

根据您的代码，函数startService() 的范围在useEffect 内的箭头函数内。它只能从useEffect 中的箭头函数中访问。您要做的是在没有范围的块中调用函数。

第二件事，useEffect 不是要显式调用的东西。效果将基于依赖数组启动。 Ryan Florance 在video 中精美地解释了如何使用 useEffect 钩子。

要使您的代码正常工作，您根本不需要 useEffect。只需将 startService() 的函数定义移出 useEffect 到主函数内部或函数外部的某个位置（如果它没有任何其他依赖项）。

如果您的目标是只启动一次startService()，您可以按如下方式使用 useEffect：

useEffect(() => {
    startService();
},[]);

另外，Button 组件的使用不正确。执行以下操作：

<Button title="Tes" onPress={startService} />

【讨论】：

function foregroundService () { useEffect(() => { const startService = async () =>{ //if 条件 await VIForegroundService.createNotificationChannel(channelConfig); } // const notificationconfig //if 条件等待 VIForegroundService.startService(notificationConfig); }; startService(); }, []);我是这样弄的，请纠正我，我对这个反应钩子真的很陌生
@valverara 您永远不应该将 useEffect 放在函数中。这是违法的！