如何使用 React 将扫描 QR 码的数据存储在数组中？

Question

I'm trying to store the data from a scanned QR code in a new array upon scan. I would then like to display the array. For example, if I scan a QR code with the app, and the QR code contains a specific string as a title, I would like the string added to an array. Any help would be much appreciated

import React, { useState } from "react";
import { Fab, TextareaAutosize } from "@material-ui/core";
import { ArrowBack } from "@material-ui/icons";
import { Link } from "react-router-dom";
import QrScan from "react-qr-reader";

const QRscanner = () => {
  const [qrscan, setQrscan] = useState("No result");
  const handleScan = (data) => {
    if (data) {
      setQrscan(data);
    }
  };
  const handleError = (err) => {
    console.error(err);
  };

  return (
    <div>
      <Link to="/">
        <Fab style={{ marginRight: 10 }} color="primary">
          <ArrowBack />
        </Fab>
      </Link>
      <span>QR Scanner</span>

      <center>
        <div style={{ marginTop: 30 }}>
          <QrScan
            delay={300}
            onError={handleError}
            onScan={handleScan}
            style={{ height: 240, width: 320 }}
          />
        </div>
      </center>

      <TextareaAutosize
        style={{ fontSize: 18, width: 320, height: 100, marginTop: 100 }}
        rowsMax={4}
        defaultValue={qrscan}
        value={qrscan}
      />
    </div>
  );
};

export default QRscanner;

Answer 1

You can define a scan array using useState

const [scanResults, setScanResults] = useState([])l
const handleScan = (data) => {
  if (data) {
    setScanResults([...scanResults, data]);
  }
}