React Native BLE开发中useEffect钩子无法阻止多蓝牙设备重复连接问题求助

Hey 老兄，我看你刚接触React Native，在做BLE蓝牙连接的时候碰到了头疼的问题——明明只想连一个外设，结果代码把所有能搜到的设备都连上了，加了判断也不管用，太闹心了对吧？我来帮你捋捋可能的问题，再给你几个实用的解决思路~

首先得说，你遇到的这个情况大概率是useState状态更新的异步性在搞鬼！你在connectToDevice里用if (!isConnected)做判断，但setIsConnected是异步更新的，当多个蓝牙设备的连接请求同时触发时，第一个请求还没来得及把isConnected改成true，后面的请求就已经通过判断了，自然会一个个发起连接。

另外也有可能是你扫描设备的逻辑没做过滤，比如扫描到所有设备就直接触发连接，哪怕已经有设备在连接流程中，或者没有针对特定的目标设备做筛选。

下面给你几个具体的解决方案，你可以挨个试试：

1. 用useRef同步跟踪连接状态 #

因为useRef的取值是同步的，不会像useState那样有更新延迟，我们可以用它来实时标记当前是否处于连接状态，这样就能有效阻止同时发起多个连接请求：

const App: React.FC = () => {
  const [isConnected, setIsConnected] = useState<boolean>(false);
  const [connectedDeviceId, setConnectedDeviceId] = useState<string | null>(null);
  // 新增ref来同步跟踪连接状态
  const isConnectedRef = useRef(false);

  const [position, setPosition] = useState<Position>({
    latitude: 37.78825,
    longitude: -122.4324,
  });

  const connectToDevice = useCallback(async (peripheralId: string) => {
    // 先检查ref的实时状态
    if (isConnectedRef.current) {
      console.log('已经有设备连接了，跳过本次连接请求：', peripheralId);
      return;
    }
    try {
      // 先同步标记为已连接状态，阻止后续请求
      isConnectedRef.current = true;
      await BleManager.connect(peripheralId);
      console.log('成功连接设备：', peripheralId);
      setIsConnected(true);
      setConnectedDeviceId(peripheralId);
    } catch (error) {
      console.error('连接失败：', error);
      // 连接失败要重置ref状态，不然下次连不上
      isConnectedRef.current = false;
      setIsConnected(false);
      setConnectedDeviceId(null);
    }
  }, []);

  // 你的其他逻辑（扫描、监听数据流等）
};

2. 扫描时先筛选目标设备 #

不要扫描到所有设备就触发连接，提前根据设备的特征（比如设备名称、专属的Service UUID）来过滤，只对目标设备发起连接，而且连接成功后立刻停止扫描，避免继续发现新设备：

// 假设你要连接的设备名称是"LocationDevice"，或者有特定的UUID
const handleDiscoverPeripheral = (peripheral) => {
  // 只对目标设备发起连接，并且当前没有设备连接
  if ((peripheral.name === "LocationDevice" || peripheral.serviceUUIDs.includes("你的目标UUID")) && !isConnectedRef.current) {
    connectToDevice(peripheral.id);
    // 连接发起后立刻停止扫描，防止再发现其他设备
    BleManager.stopScan();
  }
};

// 在扫描的逻辑里绑定这个处理函数
useEffect(() => {
  BleManager.startScan([], null, handleDiscoverPeripheral);
  return () => {
    BleManager.stopScan();
  };
}, [connectToDevice]);

3. 连接前检查已连接的外设 #

调用connect之前，先通过BLE库的API主动检查当前是否有已连接的设备，如果有就直接跳过：

const connectToDevice = useCallback(async (peripheralId: string) => {
  // 获取当前所有已连接的外设
  const connectedPeripherals = await BleManager.getConnectedPeripherals([]);
  if (connectedPeripherals.length > 0) {
    console.log('当前已有已连接的设备：', connectedPeripherals);
    return;
  }
  // 后续的连接逻辑...
}, []);

最后给你几个调试小建议：

• 在connectToDevice的开头加日志，看看是不是多个设备同时触发了这个函数，这样能确认问题出在判断逻辑还是触发时机；
• 检查你的扫描逻辑，是不是没有设置扫描时长或者停止条件，导致一直在发现新设备；
• 确保连接失败的时候，状态（包括ref和useState）都能正确重置，不然下次可能连不上设备。

希望这些方法能帮你解决问题，要是还有其他细节不清楚，随时补充代码或者场景哦！

备注：内容来源于stack exchange，提问作者javanub