React Native中如何提取react-native-wifi-reborn返回Promise中的WiFi列表

我明白你的问题了——在函数组件里处理Promise异步数据和类组件确实不一样，你现在直接赋值的方式拿到的是还未完成的Promise对象，所以打印出的是Promise的内部状态。下面是具体的解决步骤和代码示例：

核心思路 #

函数组件里我们需要借助useState来存储异步获取到的WiFi列表，用useEffect来处理异步操作（比如权限请求、WiFi扫描这类副作用），同时通过async/await来等待Promise完成，拿到实际数据。

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import Layout from './你的Layout组件路径'; // 替换成你实际的组件路径
import WifiManager from 'react-native-wifi-reborn';
import styles from './你的样式文件路径';

const MainScreen = ({ navigation }) => {
  // 用useState声明状态存储WiFi列表，初始值为空数组
  const [wifiList, setWifiList] = useState([]);

  useEffect(() => {
    // 定义异步函数处理WiFi扫描逻辑
    const fetchWifiList = async () => {
      try {
        // 先等待权限请求完成（如果这个方法是异步的，一定要加await）
        await requestFineLocationPermission();
        // 等待WiFi开启完成
        await WifiManager.setEnabled(true);
        // 等待扫描并获取WiFi列表
        const wifiData = await WifiManager.reScanAndLoadWifiList();
        // 更新状态，组件会自动重新渲染
        setWifiList(wifiData);
        console.log('实际WiFi列表:', wifiData);
      } catch (error) {
        // 捕获可能的错误，比如权限被拒、WiFi开启失败等
        console.error('获取WiFi列表出错:', error);
      }
    };

    // 调用异步函数
    fetchWifiList();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <Layout style={styles.container}>
      {/* 这里可以根据wifiList渲染UI，比如用FlatList展示 */}
      {/* 示例：
      <FlatList
        data={wifiList}
        keyExtractor={(item) => item.BSSID}
        renderItem={({ item }) => (
          <Text>{item.SSID} - 信号强度: {item.level}</Text>
        )}
      />
      */}
    </Layout>
  );
};

export default MainScreen;

关键细节解释 #

1. 为什么之前的代码拿到的是Promise对象？
   WifiManager.reScanAndLoadWifiList()返回的是一个Promise，你用.then()后返回的依然是Promise，所以直接赋值给wifiList时，它还处于等待状态，并没有拿到最终的列表数据。

2. 为什么用useEffect？
   函数组件的顶层不能直接使用await，useEffect是React专门用来处理异步操作、订阅这类副作用的钩子，空依赖数组确保逻辑只在组件第一次挂载时执行。

3. 错误处理的必要性
   加入try/catch可以捕获权限被用户拒绝、WiFi硬件故障等异常情况，方便你排查问题。

内容的提问来源于stack exchange，提问作者UnknownPerson