React Native扫码应用Alert框显示旧扫描数据问题求助

问题原因 #

1. 代码中未定义showAlert函数，点击按钮时无法正确触发Alert；即便自定义了该函数，传参方式错误（showAlert({text})传递的是对象而非实际文本值）。
2. React状态更新是异步的，若依赖text状态显示Alert，可能在状态未完成更新时获取到旧值。

解决方案 #

方案1：扫描完成后直接显示最新结果（推荐）

修改handleBarCodeScanned函数，直接使用扫描到的data触发Alert，规避异步状态更新的问题：

const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setText(data);
  // 直接用扫描到的data弹出Alert，确保显示最新内容
  Alert.alert('扫描结果', data);
  console.log("Type: " + type + "\nData: " + data);
};

方案2：点击按钮时显示最新结果

先定义showAlert函数，再调整按钮的点击逻辑：

// 定义showAlert函数
const showAlert = (scanResult) => {
  Alert.alert('扫描结果', scanResult);
};

// 修改按钮的onPress事件
<Button
  title="Scan again?"
  onPress={() => {
    showAlert(text); // 直接传递text状态值
    setScanned(false);
  }}
  color="tomato"
/>

额外优化

如果希望每次重新扫描前清空旧结果，可在重置扫描状态时同步重置文本：

onPress={() => {
  setText("Not yet scanned");
  setScanned(false);
}}

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