Di React, saya menggunakan library Quagga.js untuk memecahkan kode barcode dari webcam.

Semuanya berfungsi dengan baik kecuali dalam fungsi "OnDetected" yang dipanggil Quagga saat kode batang dipindai. Saat datang dari panggilan balik, kode React kehilangan akses ke "ini" dari Komponen React.

Di bawah ini adalah kode dan masalah muncul di fungsi onDetected(result) saat dipanggil sebagai panggilan balik dari Quagga.onDetected(this.onDetected);

Jika merasa masalah ini lebih merupakan kesalahpahaman tentang Bereaksi itu sendiri daripada perpustakaan yang mengalami masalah. Jika ini masalahnya, beberapa prinsip umum untuk bekerja dengan Perpustakaan Pihak Ketiga akan sangat dihargai.

onDetected(result) {
    this.processBarcode(result["codeResult"]["code"]); //<- "this" refers to the callback, not the react component
}

processBarcode(barcode) {
    if (barcode.startsWith("US-")) {
        this.setState({user_barcode: barcode});
    } else {
        this.setState({shop_drawing_barcode: barcode});
    }
}

componentDidMount() {
    (new Promise((resolve, reject) => {
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                target: document.querySelector('#scanner_window'),    // Or '#yourElement' (optional)
                constraints: {
                    width: 480,
                    height: 480,
                    facingMode: "environment" // or user
                }
            },
            numOfWorkers: 1,
            decoder: {
                readers: ["code_128_reader"]
            }, locate: true

        }, (err) => {
            Quagga.start();
            console.log("Initialization finished. Ready to start");
            resolve();
        })
    })).then(() => {
        //Set the callback
        Quagga.onDetected(this.onDetected);
    });
}
0
Bigbob556677 17 April 2020, 19:04

1 menjawab

Jawaban Terbaik

This.onDetected mungkin meneruskan fungsi tanpa mengikat this.onDetected. Anda harus secara eksplisit mengikat this.onDetected

Quagga.onDetected(this.onDetected.bind(this));
1
vishnu sandhireddy 17 April 2020, 16:16