CODEWITHSUNDEEP
reactjsnext.jshtml5-qrcode
WangYudong
WangYudong

Reputation: 4423

Component will disappear when updating array in State

I integrated html5-qrcode in a next.js project. The state array should be updated when barcode is recognized (onNewScanResult callback).

The main code is the following. The results are logged normally but if decodedResults is updated, the html5-qrcode component will disappear. If I removed that line, the code would work well.

const [decodedResults, setDecodedResults] = useState([]);
const onNewScanResult = (decodedText, decodedResult) => {
  console.log("App [result]", decodedResult);
  setDecodedResults((prev) => [...prev, decodedResult]); // this line caused the issue
};

Could someone shed some light? I also created a codesanbox example here: https://codesandbox.io/p/sandbox/falling-lake-4yw25n. Just use your camera to scan some barcode or qrcode to make the component disappear.

Upvotes: 0

Views: 69

Answers (0)

Related Questions