React Native中无法传递变量/useState值至其他函数的问题排查

核心问题分析 #

1. 扫码组件重复触发：多数React Native扫码组件在扫描成功后不会自动停止，会持续触发handleBarCodeScanned，第二次触发可能未捕获到有效数据，导致传入getStore的值为null。
2. 状态更新异步性：React的setScanned是异步操作，在调用getStore时，scanned状态还未更新为true，导致传入的scannedData是旧值（通常为初始的false或null）。
3. getStore逻辑错误：原代码中判断逻辑颠倒，错误地将无效的scannedData赋值给查询用的data变量。

具体修复步骤 #

1. 阻止扫码组件重复触发

给扫码组件添加条件，当扫描完成后停止监听扫码事件：

<BarCodeScanner
  // 当scanned为true时，移除扫码监听，避免重复触发
  onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
  style={StyleSheet.absoluteFillObject}
/>

（注：如果使用react-native-camera等其他库，可通过对应属性停止扫描，比如设置pausePreview={scanned}）

2. 简化参数传递，直接传递扫描数据

修改handleBarCodeScanned，无需依赖状态，直接将扫描到的data传给getStore：

const handleBarCodeScanned = async ({ type, data }) => {
  setScanned(true);
  setScannedCode(data);
  console.log("code scanned: ", data);
  // 直接传递扫描到的原始数据
  await getStore(data);
};

3. 重构getStore函数，修正逻辑并添加错误处理

const getStore = async (scanData) => {
  const storeRef = collection(db, 'stores');
  console.log("scanned Code: ", scanData);

  // 先校验数据有效性
  if (!scanData) {
    setErrorMessage('Invalid scan data.');
    console.log("Invalid scan data");
    return;
  }

  try {
    const q = query(storeRef, where('storeCode', '==', scanData));
    const querySnapshot = await getDocs(q);

    const storeList = [];
    querySnapshot.forEach((doc) => {
      storeList.push(doc.data());
    });

    if (storeList.length > 0) {
      setStore(storeList);
      getStoreAndNavigate();
    } else {
      setErrorMessage('Please scan the code again.');
      console.log("No store found with this code");
      // 若需要重新扫描，可在此重置状态：setScanned(false);
    }
  } catch (error) {
    console.error("Error fetching store data: ", error);
    setErrorMessage('Failed to load store information.');
  }
};

备选方案：用useEffect监听状态变化

如果必须依赖状态变量触发查询，可通过useEffect监听scannedCode的更新，确保拿到最新值：

import { useEffect } from 'react';

// 监听scannedCode变化，有值时调用查询
useEffect(() => {
  if (scannedCode) {
    getStore(scannedCode);
  }
}, [scannedCode]);

// 修改handleBarCodeScanned，仅更新状态
const handleBarCodeScanned = async ({ type, data }) => {
  setScanned(true);
  setScannedCode(data);
  console.log("code scanned: ", data);
};

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