某些二維碼無法從 react-qr-reader 中讀取

Question

我試圖實施 QR 驗證。 所以我為 40 個人生成了二維碼，其中 2 個人沒有被掃描。 當我嘗試通過其他應用程序進行掃描時，它會從二維碼中讀取數據。 我無法確定問題出在二維碼還是掃描儀上。 當我從一個名為 QR-monkey 的在線網站生成二維碼時，掃描儀能夠讀取數據。 所以請幫我弄清楚問題出在哪里。 由於清晰度問題，當我假設它時，我也將 QR 分辨率調整為 2000px。

掃描器：

const Scanner = (props) => {
  const [startScan, setStartScan] = useState(false);
  const [loadingScan, setLoadingScan] = useState(false);
  const [data, setData] = useState("");

  
  const handleScan = async(scanData) => {
    console.log(`loaded data data`, scanData);
    if (scanData && scanData !== "") {
      setLoadingScan(true);
      console.log(`loaded >>>`, scanData);
      const resData= JSON.parse(scanData)
      console.log(resData);
      setStartScan(false);
      setData(resData);
  setLoadingScan(false);
      
  };
}


  const View = (e) => {
    navigate('/View')
  }

  const handleError = (err) => {
    console.error(err);
    navigate('/Scan')
  };
  
  const handleVerify = async(e) =>{
    setisverifying(true)

    const response = await axios({
      method:'post',
      url: 'verifyurl',
      data: data
  }).then(res => {
    console.log(res);
    if (res.status == 201) {
     
      navigate('/Success', {
        state:{
          name:res.data.resName,
          taken:res.data.resTaken,
          preference:res.data.resPreference,
          team:res.data.resTeam,
        }
      })
    }
  }).catch(err => {
    console.log(err);
  })
  setisverifying(false)
  }
  
  return (
    <div className="login-box">
    <h2>
      Scanner
    </h2>
<>
    <button className='scanButton'
      onClick={() => {
        setStartScan(!startScan);
        setData('')
      }}
    >
      {startScan? "Stop Scan": "Start Scan"}
    </button>
    {startScan && (
      <>
        <QrReader
          delay={100}
          onError={handleError}
          onScan={handleScan}
          // chooseDeviceId={()=>selected}
          style={{ width: "100%", height: "100%" }}
        />
      </>
    )}
    {loadingScan ? 
    <CircularProgress />
    : ''}

    {data == ""? '':''
        }
    {data !== "" && <table className='tTable'>
        <tbody className='Ttbody' >
          <tr className='Ttr'><p>Name</p>
          <td className='Ttd' >{data.state.name}</td>
          </tr>
          
          <tr className='Ttr'><p>Team</p>
          <td className='Ttd'>{data.team}</td>
          </tr>
          
        </tbody>
      </table>}
    {isverifying?
    <CircularProgress /> : '' }
    {data !=="" && <button className='scanButton' type="" onClick={handleVerify} >Verify</button>}
    
    <button className='scanButton' onClick={View}>View</button>
  </div>
  );
};

export default Scanner;

生成器.js：

function QrCodeGenerator() {
    const [state, setState] = useState({
        name:'',
        phone:'',
        email:''
    });
    const [team, setTeam] = useState('');
  const teams = [
    {value:'Greeters', label:'Greeters'},
    {value:'Cleaning', label:'Cleaning'},
  ]
  

    const GenerateQRCode = (e) => {
    e.preventDefault()

    QRCode.toDataURL(value, {
            margin: 2,
            color: {
                dark: '#000000',
                light: '#ffffff'
            },
      width: 2000,
      height:2000
        }, (err, value) => {
            if (err) return console.error(err)    
            console.log(value)
            setQr(value)
      console.log(data)
        })
    }


    function handleChange(event) {
        const res = event.target.value;
        setState({
            ...state,
            [event.target.name]: res
        })
    }

    const handleSelect = (e) => {
      setTeam(e.value)
      console.log(data);
    }
    const data = {
      state, team
    }

    
    const value = JSON.stringify(data)
    const handleSubmit = async(e) =>{
      e.preventDefault()
      if (team=='') {
        alert("Team is Required")
      }
      else{
      setLoading(true)
      const response = await axios({
        method:'post',
        url: "submitURL",
        data: data
      })
      .then(res => {
        console.log(res);
        if(res.status==201){
          setSuccess(true)
          setLoading(false)
        }
        // Create the email payload with the QR code image as an attachment
        
      })
      .catch(err => {
        console.log(err);
        if (err.response.status==406) {
          setErr(true)
          seterrMsg("The volunteer already exists!")
        }
        else{
          alert('There is an internal Server error. Kindly report to the IT team')
        }
      })
      setState({
        name:'',
        phone:'',
        email:''
      })
      setTeam('')
      setLoading(false)

    }
  }

}
const handleSuccess = (e) =>{
  setSuccess(false)
}
      // download QR code
    
  return (
    <div className='login-box'>
        <form onSubmit={GenerateQRCode}>
          <input name='name' id='name' placeholder='Full Name' pattern="^(\w+)\s(\w+)$" value={state.name} onChange={handleChange} required />
            <input name='phone' id='phone' placeholder='Phone' type='tel' pattern="(6|7|8|9)\d{9}$" value={state.phone} onChange={handleChange} required='true'/>
            <input name='email' id='mail' placeholder='Email' type='email'  value={state.email} onChange={handleChange} required />
              <br/>
            <Select
              className='SelectTeam'
              closeMenuOnSelect={true}
              components={animatedComponents}
              isMulti={false}
              options={teams}
              name='team'
              onChange={handleSelect}
            />
                <button type='submit' >Generate</button>
        </form>  
        {qr && <>
                <img src={qr} alt='' className='qrimg' id='can'/>
        <a href={qr} download={`${state.name}.png`} ><button value="Download" >Download</button></a>
            </>}
      {loading ?  <CircularProgress /> :
      <button onClick={handleSubmit}>Submit</button>}
      <br/>       
    </div>

  )
}

export default QrCodeGenerator

謝謝你幫忙。 我試圖將代碼減少到最重要的部分，但最終還是保留了它們，假設它可能會提供一些輸入來幫助我。 最后一個問題是，真正能夠讀取二維碼的應用程序使用什么樣的掃描儀？ 為什么我的掃描儀可以讀取在線生成的，而不是我生成的？

Answer 1

似乎react-qr-reader有未解決的錯誤。 所以我只是將模塊更改為modern-react-qr-reader ，這是一個新的更好的 package，它將收到許多更新。 那解決了我的問題。