我已經實作了一個Dialog顯示一些狀態變數值的組件。
當Dialog關閉時，狀態變數被重置為默認值。問題是雖然Dialog不到一秒就關閉了，但仍然有足夠的時間看到文本發生了變化。
有沒有辦法阻止文本更改直到Dialog實際關閉？我嘗試將dialogOpen狀態變數設定為falsefirst，然后將其他狀態變數重置為默認值，但這并沒有幫助，因為它發生得太快并且 React無論如何都會異步批處理狀態更改。
<Dialog
open = {dialogOpen}
onClose = {() => handleDialogClose()}
... />
handleDialogClose()：
const handleDialogClose = () =>
{
setDialogOpen(false)
setStateVariables(DEFAULT_VALUES)
}
我認為這個問題對于更多的組件來說是普遍的，而不僅僅是Dialog，因為它也發生在Snackbar組件上出現的文本上。所有這些的通用解決方案將是最好的，但任何事情都會有所幫助。
編輯：Dialog使用Fade轉換，timeout.exit延遲約為 200 毫秒。setTimeout()根據@technophyle 下面的回答，使用延遲更新狀態變數是有效的。傳遞給的延遲setTimeout()可以為 0，額外的時間仍然足以防止看到更改。
uj5u.com熱心網友回復：
Dialog如果你的組件有 CSS 過渡影片，這是一個很難優雅地解決的問題。
如果您知道過渡持續時間，一種解決方案（雖然不是很漂亮）：
const handleDialogClose = () =>
{
setDialogOpen(false)
setTimeout(() => {
setStateVariables(DEFAULT_VALUES)
}, TRANSITION_DURATION_MS)
}
uj5u.com熱心網友回復：
您可以處理更改狀態變數作為副作用
useEffect(() => {
if(!dialogOpen){
setStateVariables(DEFAULT_VALUES);
}
}, [dialogOpen]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432115.html
標籤：反应