所以我正在建立一個二維碼掃描應用程式。
當我掃描一個條形碼時，我希望出現另一個模式，但我希望將資料（從條形碼中解碼）傳遞給我的子組件，它是ResponseModal。
這是我的代碼
。QrScanner.js
import { useHistory } from "react-router-don";
import BarcodeScannerComponent from "react-qr-barcode-scanner" ;
import React, { useEffect, useState} from "react"/span>;
import axios from 'axios' ;
import ResponseModal from './ResponseModal';
const QrScanner = () => {
const [data, setData ] = useState(''/span>);
const [flag, setFlag] = useState(false);
const history = useHistory();
useEffect(() => {
if(data ==''/span>) {
return;
}
if (Number.isInteger(parseInt(data) ) { //barcode scanned get('/some/endpoint/code/' data)
.then(res => {
if (res.data != false) {
setFlag(true)。
} else{
setData('Sorry, Wrong barcode!');
}
})
}
})
return (
<>
<BarcodeScannerComponent
width={500}.
height={500}。
onUpdate={(err, result) => {
if (result) {
setData(result.text)。
}
}}
/>
<p className="modal-result-show">{data}</p> < ---- this update fine when barcode is scanning
<ResponseModal open={flag}。data={data}/> <---- this is empty, why?
</>
);
}
輸出默認的QrScanner
這是我的ResponseModal:
import 'react-responsive-modal/styles.css'/span>。
import Modal from 'react-responsive-modal';
import React, {useEffect, useState} from "react"/span>;
const ResponseModal = (flag, data) => {
const [open, setOpen] = useState(false);
const onCloseModal = () => setOpen(false);
console.log(data); <----- empty
useEffect(() => {
if(flag.open ==true) {
setOpen(true)。
flag.open = false;
}
})
return (
<>
<模態 open={open} onClose={onCloseModal}>
<div className="qr-modal-header-stock">
<h5>輸入履行庫存</h5>。
<form action="/some/another/endpoint/save" method="POST">
<input type="hidden" name="ean" value={data}。/> <---空
< 輸入型別="number" name="product_stock" class="form-control" /> <br />
< input type="submit" class="btn btn-primary form-control" />
</form>
</div>
</Modal>
</ >
);
}
export default ResponseModal
我的問題是，為什么我的ResponseModal中沒有收到資料？我以為每當{data}更新時，所有使用它的東西也會重新顯示或被傳遞。我錯過了什么？我需要{data}在我的后端對其進行一些邏輯處理。
uj5u.com熱心網友回復：
你使用props的方式不對。props是一個物件，只需像這樣更新。
const ResponseModal = （props） => {
const {flag, data} = props;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/318041.html
標籤：
上一篇：處理做同步作業的異步函式