没有 useEffect 的“同步”useState

Question

我有一个检测到的蓝牙设备列表，deviceList，它是用useState 设置的：

const [deviceList, setDeviceList] = useState([]);

我有一个启动设备扫描的按钮。每次扫描开始时，我都需要将设备列表重置为[]。我愿意：

const scanForDevices = () =>  {
    setDeviceList([]);

    manager.startDeviceScan(null, null, (error, device) => {
        // add device to device list
        setDeviceList(old => [...old, device]);
    }
}

问题是setDeviceList 不是同步的，并且deviceList 在应该添加新设备时没有重置。这可能会导致重复的设备。我可以通过过滤来防止重复，但这只是对实际问题的一种破解。

我不能使用 useEffect 来解决这个问题，所以请不要建议它。 startDeviceScan 不能在每次deviceList 更改时运行。

在没有真正原子的setState 的情况下如何解决这种情况？

Answer 1

如果您尝试清除列表并且startDeviceScan 返回多个设备，您似乎可以创建一个临时变量来构建列表，然后在完成时设置状态。

const scanForDevices = () =>  {
    const devices = [];

    manager.startDeviceScan(null, null, (error, device) => {
        // add device to device list
        devices.push(device);
    }

    setDeviceList(devices);
}

Answer 2

您是否尝试过使用useReducer 挂钩来更改您的状态？我没有尝试用这个钩子解决像你这样的时间问题，但值得一试。

解决方案可能看起来像这样（未经测试）：

const initialState = []
const reducer = (state, {type, payload}) => {
  switch (type) {
    case 'RESET':
      return initialState
    case 'ADD_DEVICE':
      return [...state, payload]
    default:
      return state
  }
}
const [deviceList, dispatch] = useReducer(reducer, initialState)

...

const scanForDevices = () =>  {
  dispatch({type: 'RESET'})

  manager.startDeviceScan(null, null, (error, device) => {
    // add device to device list
    dispatch({type: 'ADD_DEVICE', payload: device})
  }
}