Сканер штрих-кода камеры-реактивной камеры зависает, потому что сканирует слишком быстро

Question

Я пытаюсь использовать сканер штрих-кода с react-native-camera.Сначала он сканирует QR-код и извлекает строку, после чего переходит на следующий экран с помощью react-navigation.На втором экране он выполняет API-вызов.

Теперь, если я вернусь к экрану сканера, де-QR-код будет отсканирован немедленно.Вот где я сталкиваюсь с ошибкой, и сканер зависает.Я обычно получаю эту ошибку:

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?

Answer 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>
    )
  }
}