react-native-camera 条形码扫描仪冻结，因为它扫描速度太快

Posted 2023-03-11

【中文标题】react-native-camera 条形码扫描仪冻结，因为它扫描速度太快

【英文标题】：react-native-camera barcode scanner freezes, because it scans too fast

【发布时间】：2018-05-17 21:25:24

【问题描述】：

我正在尝试使用来自react-native-camera 的条形码扫描仪。首先，它扫描二维码并提取一个字符串，然后导航到带有react-navigation 的下一个屏幕。在第二个屏幕中，它进行 API 调用。

现在，如果我返回扫描仪屏幕，将立即扫描二维码。那就是我遇到错误并且扫描仪冻结的地方。我通常会收到此错误：

Can't call setState (or forceUpdate) on an unmounted component

我认为这是因为我的componentWillUnmount 清理工作不正常或不够快，但我已经取消了 axios 请求。

       requestCode = (code) => 
        if (cancel != undefined) 
          cancel();
        
        axios.get(API_URI + code, 
          cancelToken: new CancelToken(function executor(c) 
            cancel = c;
          )
        ).then(response => 
          console.log(response)
          //checks if code was already called
          this.checkUsed(response.data)
        )
          .catch(error => 
            this.setState( isValid: false )
          );
        

    componentWillUnmount() 
        cancel();
      

也许我可以稍后安装相机扫描仪，这样它就不会扫描这么快，或者它甚至可能是 React Navigation 的错误？

【参考方案1】：

你可以使用一个标志来控制。

class QR extends Component 
  constructor(props) 
    super(props)

    this.state = 
      scanable: true
    

    this.cameraAttrs = 
      ref: ref => 
        this.camera = ref
      ,
      style: styles.preview,
      type: RNCamera.Constants.Type.back,
      barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
      onBarCodeRead: ( data ) => 
        this.callback(data)
      
    
  

  componentWillMount() 
    this._mounted = true
  

  componentWillUnmount() 
    this._mounted = false
  

  callback(text) 
    if (!this.state.scanable) 
      return
    

    console.log(text)
    this.setState( scanable: false )
    setTimeout(() => 
      if (this._mounted) 
        this.setState( scanable: true )
      
    , 1000) // 1s cooldown
  

  render() 
    return (
      <View style=styles.container>
        <RNCamera
          ...this.cameraAttrs
        >
        </RNCamera>
      </View>
    )
  

【讨论】：

我认为您应该使用clearTimeout() 而不是_mounted 标志。例如this.timeout = setTimeout(...)；然后在componentWillUnmount 清除超时：if (this.timeout) clearTimeout(this.timeout) ;