React Native中useState在Socket Mobile回调中无法可靠更新设备列表

问题背景 #

在开发Socket Mobile的React Native SDK时，遇到useState状态更新后，传递给Socket Mobile Capture库的onCaptureEvent回调内无法获取最新状态的问题。当前使用版本：react: "17.0.2"，react-native: "0.68.2"

问题细节 #

• onCaptureEvent回调监听捕获事件，触发DeviceArrival（扫描设备连接平板）时尝试更新设备列表状态，但后续移除设备操作无法找到目标设备。
• 首次有效的更新方式后续失效：

setDevices(prevDevices => {
  prevDevices = prevDevices || [];
  prevDevices.push({
    guid,
    name,
    handle: newDevice.clientOrDeviceHandle,
    device: newDevice,
  });
  return [...prevDevices];
});

• 尝试非直接修改状态的方式完全无效：

setDeviceList((prevDevices) => [...prevDevices, newDevice]); 

• 已尝试用useCallback包裹回调、改为异步函数加await，仅字符串类型状态（如status）能正常更新，设备列表状态始终异常。
• 【更新】组件UI的return语句前console.log(devices)、监听devices变化的useEffect中能看到最新状态，但onCaptureEvent回调内无法获取更新后的列表，推测回调并非由RN组件直接调用导致。

问题原因 #

这是闭包陷阱导致的：onCaptureEvent被Socket Mobile Capture库保存后，会一直持有定义它时所在渲染周期的状态闭包，后续即使组件重新渲染、状态更新，回调内访问的依然是旧的状态引用。而UI和useEffect在每次渲染时重新执行，因此能拿到最新状态。

解决方案 #

方案1：使用useRef保存状态的最新引用 #

useRef的.current属性在组件生命周期内保持可变且不会触发重渲染，可用来同步最新的设备列表状态，让回调直接访问最新值。

import { useState, useRef, useEffect } from 'react';

function YourComponent() {
  const [devices, setDevices] = useState([]);
  // 用ref保存最新设备列表
  const devicesRef = useRef(devices);

  // 同步状态到ref
  useEffect(() => {
    devicesRef.current = devices;
  }, [devices]);

  const onCaptureEvent = (event) => {
    if (event.name === 'DeviceArrival') {
      const { guid, name, clientOrDeviceHandle: handle, device: newDevice } = event.data;
      // 更新状态
      setDevices(prev => [...prev, { guid, name, handle, device: newDevice }]);
      // 通过ref获取最新状态
      console.log('最新设备列表：', devicesRef.current);
    } else if (event.name === 'DeviceRemoval') {
      // 移除设备时直接用ref内的最新列表处理
      const updatedDevices = devicesRef.current.filter(dev => dev.guid !== event.data.guid);
      setDevices(updatedDevices);
    }
  };

  // 注册/注销回调
  useEffect(() => {
    SocketCapture.registerCaptureEvent(onCaptureEvent);
    return () => {
      SocketCapture.unregisterCaptureEvent(onCaptureEvent);
    };
  }, []);

  // 组件其余逻辑
}

方案2：使用useReducer管理状态 #

useReducer的dispatch函数是稳定的（不会随渲染变化），可在回调中通过dispatch更新状态，避免闭包问题。

import { useReducer, useEffect } from 'react';

// 定义reducer函数
const deviceReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_DEVICE':
      return [...state, action.payload];
    case 'REMOVE_DEVICE':
      return state.filter(dev => dev.guid !== action.payload.guid);
    default:
      return state;
  }
};

function YourComponent() {
  const [devices, dispatch] = useReducer(deviceReducer, []);

  const onCaptureEvent = (event) => {
    if (event.name === 'DeviceArrival') {
      const { guid, name, clientOrDeviceHandle: handle, device: newDevice } = event.data;
      dispatch({
        type: 'ADD_DEVICE',
        payload: { guid, name, handle, device: newDevice }
      });
    } else if (event.name === 'DeviceRemoval') {
      dispatch({
        type: 'REMOVE_DEVICE',
        payload: event.data
      });
    }
  };

  useEffect(() => {
    SocketCapture.registerCaptureEvent(onCaptureEvent);
    return () => {
      SocketCapture.unregisterCaptureEvent(onCaptureEvent);
    };
  }, [dispatch]); // dispatch稳定，可作为依赖

  // 组件其余逻辑
}

方案3：让回调随状态更新重新创建（结合useCallback） #

若必须使用useState，可让onCaptureEvent依赖devices，每次状态变化时重新创建回调并重新注册：

const onCaptureEvent = useCallback((event) => {
  if (event.name === 'DeviceArrival') {
    const { guid, name, clientOrDeviceHandle: handle, device: newDevice } = event.data;
    setDevices(prev => [...prev, { guid, name, handle, device: newDevice }]);
  } else if (event.name === 'DeviceRemoval') {
    setDevices(prev => prev.filter(dev => dev.guid !== event.data.guid));
  }
}, [devices]);

useEffect(() => {
  SocketCapture.registerCaptureEvent(onCaptureEvent);
  return () => {
    SocketCapture.unregisterCaptureEvent(onCaptureEvent);
  };
}, [onCaptureEvent]); // 回调变化时重新注册

注意：需确认Socket Mobile Capture库支持频繁注册/注销回调，避免异常。

关键注意点 #

• 避免在第三方库回调内直接依赖useState状态变量，优先通过更新函数的prev参数处理状态更新，或用useRef同步最新值。
• 注册第三方库回调时，务必在组件卸载时注销，防止内存泄漏。

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