node.js - 在回调中设置反应状态不能按预期工作

Question

我正在制作条形码阅读应用程序。我使用Quaggajs和Reactjs。
Quaggajs 有一个功能Quagga.onDetected(callback)，callback有一个参数result。包含检测到的result条形码。我有一个反应状态（const [count, setCount] = useState(0);），我正在计算检测到的条形码。问题是，当我setCount(count + 1)在变量中使用时callback，count它始终是初始值（0），所以每次 onDetect setCount 都将新值设置为 1。

下面是我使用的函数式 react 组件的一个示例（我认为从 的 props 中获取 count 和 setCount 没有问题）：

const Body = ({setCount, count, ...rest }) => {

    const start = () => {
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                constraints: {
                    facingMode: "environment",
                },
                area: {
                    top: "30%",
                    bottom: "30%"
                }
            },
            locate: false,
            frequency: 50,
            decoder: {
                readers: [
                    // "code_128_reader",
                    "ean_reader",
                    // "ean_8_reader",
                    // "code_39_reader",
                    // "code_39_vin_reader",
                    // "codabar_reader",
                    // "upc_reader",
                    // "upc_e_reader",
                    // "i2of5_reader"
                ],
                debug: {
                    showCanvas: true,
                    showPatches: true,
                    showFoundPatches: true,
                    showSkeleton: true,
                    showLabels: true,
                    showPatchLabels: true,
                    showRemainingPatchLabels: true,
                    boxFromPatches: {
                        showTransformed: true,
                        showTransformedBox: true,
                        showBB: true
                    }
                }
            },

        }, function (err) {
            if (err) {
                console.log(err);
                return
            }

            console.log("Initialization finished. Ready to start");
            Quagga.start();
        });

        Quagga.onProcessed(function (result) {
            var drawingCtx = Quagga.canvas.ctx.overlay,
                drawingCanvas = Quagga.canvas.dom.overlay;

            if (result) {
                if (result.boxes) {
                    drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                    result.boxes.filter(function (box) {
                        return box !== result.box;
                    }).forEach(function (box) {
                        Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                    });
                }

                if (result.box) {
                    Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
                }

                if (result.codeResult && result.codeResult.code) {
                    Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
                }
            }
        });

        Quagga.onDetected((result) => {
            if (result && result.codeResult && result.codeResult.startInfo && result.codeResult.startInfo.error < 0.03) {
                console.log("Sould change")
                setCount(count + 1);
            }
        });
    }

    const stop = () => { Quagga.stop(); }


    useEffect(() => {
        start();
        console.log("CHANGE BODY");
        return () => {
            stop();
        }
    }, [])

    return (
        <Grid container justify="center">
            <div id="interactive" className="viewport" style={{ position: 'unset', width: '100vw', height: "100vh" }}>
                <video src=""></video>
                <canvas class="drawingBuffer"></canvas>
            </div>
        </Grid>
    )
}

标签： node.jsreactjscallbackquaggajs