我有一個模式，當我掃描一個qr碼時就會打開。在這之后，我設定了一個props為true，它告訴我的Responsemodal打開了。問題是，我無法關閉，因為這個道具在子組件中是只讀的。
下面是我的代碼：
const ResponseModal=（props）=> {
const closeIcon = (
< svg fill="black" width="28" 高度="28"/span> viewBox="0 0 36 36" data-testid="close-icon"/span>> <path d="M28。 5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38L2.12 2.12L18 20.12L8.38 8.38 2.12-2.12L20。 12 18z"></path></svg>
);
const {flag, data, title}. = props;
const [open, setOpen] = useState(false)。
const onCloseModal = () => setOpen（false）。
useEffect(() => {
if(flag == true) { <-- qr code scanned, this trigger my ResponseModal to open up but it remains true
setOpen(true)。
}
})
回傳 (
<>
< Modal open={open} onClose={onCloseModal} center closeIcon={closeIcon} modalId="response-modal"/span>>
<div className="qr-modal-header-stock">/span>
<h5>輸入股票</h5>
<p>{title}</p>
</div>/span>
</Modal>
</ >
);
而我的父組件：
const QrScanner=（）=> {
const [data, setData ] = useState(''/span>)。
const [flag, setFlag] = useState(false);
const [title, setTitle] = useState(''/span>)。
const history = useHistory() 。
useEffect(() => {
if(data === ''/span>) {
return;
}
if (Number.isInteger(parseInt(data))
{
axios.get('/api/qrcodescanner/ean/'/span> data)
.then(res => {
if (res.data.title !=false)
{
setFlag(true)。
setTitle(res.data.title) 。
}
else; }
{
setData('Sorry, Wrong barcode!')。
}
})
}
})
return (
<>/span>
<BarcodeScannerComponent[/span
width={500}
高度={500}
onUpdate={(err, result) => {
如果（結果） {
setData(result.text)。
}
}}
/>
<p className="modal-result-show"/span>> {data}</p>。
< ResponseModal flag={flag} data={data} title={title}/>
</>
);
}
盡管我把open設定為false onClose，但它還是消失了，緊接著就出現了，有什么想法嗎，我錯過了什么？
uj5u.com熱心網友回復：
你忘了在useEffect中添加依賴性。只要把flag添加到依賴關系陣列中，以確保它只在標志改變時呼叫
useEffect(() =>/span> {
if(flag == true) { <-- qr code scanned, this trigger my ResponseModal to open up but it remains true
setOpen(true)。
}
}, [flag])
uj5u.com熱心網友回復：
我看到你需要把一些東西暴露給父類，有幾種方法。
open狀態重新定位到父級。
const ResponseModal=（{ open, setOpen }）=> {
//目前你使用的是一個狀態，而不是。
// relocate this state to the parent.
}
const QrScanner = (/span>) => {
const [open, setOpen] = useState(false)
return < ResponseModal open={open} setOpen={setOpen} />/span>
基本上要求你的父母管理模式。
聽從on狀態
。
如果你認為上面的方法太重，因為你已經有一個非常好的模態組件。我們可以只建立一個on標志。
const ResponseModal = （{ on }）=> {
const [open, setOpen] = useState(on)
useEffect(() => {
setOpen(on)
}, [on])
}
const QrScanner = (/span>) => {
const [on, setOn] = useState(false)
return <ResponseModal on={on} />
這是一個技巧，確保on在改變時可以驅動open。在你的父類中，你可以直接呼叫setOn(false)。
我沒有注意到你已經在使用一個flag，所以這就是on。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/320421.html
標籤：