無法使用 React 中的 useState 掛鈎設置上一個代碼 state

Question

我是新來的反應和 javascript 並且不明白為什么setPreviousCode沒有改變 state。 我想將以前掃描的文本存儲在previousCode中。

import React, { useEffect, useState } from "react"
import { Html5Qrcode } from "html5-qrcode"
import { useCallback } from "react"

let html5QrCode
const brConfig = {
    fps: 10,
    qrbox: { width: 300, height: 150 },
    disableFlip: false,
}

export const Scanner = () => {
    const beep = new Audio("https://www.soundjay.com/buttons/beep-08b.mp3")

    const [previousCode, setPreviousCode] = useState(null)

    useEffect(() => {
        html5QrCode = new Html5Qrcode("reader")
        startScan()
    }, [])

    const startScan = useCallback(() => {
        console.log("imrunngin")
        const qrCodeSuccessCallback = (decodedText, decodedResult) => {
            if (previousCode !== decodedText) {
                beep.play()
                setPreviousCode(decodedText)
            }
        }
        html5QrCode.start(
            { facingMode: "environment" },
            brConfig,
            qrCodeSuccessCallback
        )
    }, [])

    const handleStop = () => {
        try {
            html5QrCode
                .stop()
                .then((res) => {
                    html5QrCode.clear()
                    console.log("stopped")
                })
                .catch((err) => {
                    console.log(err.message)
                })
        } catch (err) {
            console.log(err)
        }
    }

    return (
        <div style={{ position: "relative", backgroundColor: "#1E1E1E" }}>
            <div id="reader" width="100%" />
        </div>
    )
}

Answer 1

當您更新 state 屬性時，相對於其先前的值，使用 state 設置器的回調參數*。 否則可能會考慮陳舊的 state 值。

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

嘗試，

 const qrCodeSuccessCallback = (decodedText, decodedResult) => {
     setPreviousCode((previousCode)=> {
         if (previousCode !== decodedText) {
            beep.play()
            return decodedText;
         }
         return previousCode
     });
 }

甚至更好（state 設置器是純的）：

const qrCodeSuccessCallback = (decodedText, decodedResult) => {
     setPreviousCode((previousCode)=> (previousCode !== decodedText) ?decodedText:previousCode
     });
 }

 useEffect(()=>{
     beep.play();
 }, [previousCode]);