钩子中的 setTimeout 不会改变状态

Question

我正在尝试上传图像，20秒后，如果图像未更新，我想关闭UploadingIndicator组件(在上传开始时出现(并显示自定义WaitAlert组件，用户可以在其中选择等待或尝试再次发送图像。

但是我在显示自定义等待警报组件时遇到问题。它不显示。

这是我的代码：

import WaitAlert from '../components/alert/waitAlert'
import UploadingIndicator from '../components/uploadingIndicator/uploadingInddicator'
let sendingTimeout
const App = (props) => {
const [showUploadingIndicator, setShowUploadingIndicator] = React.useState(false)
const [showWaitAlert, setShowWaitAlert] = React.useState(false);
saveAsset = () => {
setShowUploadingIndicator(true)
sendingTimeout = setTimeout(() => {
setShowUploadingIndicator(false)
setShowWaitAlert(true)  //THIS IS NOT DISPLAYING WaitAlert
}, 20000)
updateMutation({
variables: {
assets: [{
files
}]
}
}).then(result => {
setShowUploadingIndicator(false)
clearTimeout(sendingTimeout)
setShowWaitAlert(false)
})
.catch((error) => {
console.log("error.toString()", JSON.stringify(error))
})
}
return (
<View>
<TouchableOpacity onPress={saveAsset} />
{showUploadingIndicator &&
<UploadingIndicator />       
}
{showWaitAlert &&
<WaitAlert />
}
</View>
);
}

如何让等待警报出现？

Answer 1

sendingTimeout在clearTimeout(sendingTimeout)中被清除，则 setTimeout 在 20 秒后不会触发。尝试删除该行clearTimeout(sendingTimeout)以查看其是否有效。

Answer 2

我找到了解决方案。

问题出在等待警报组件中。

我添加了主视图的样式，其中模态被放置在：

mainView: {
top: 0,
left: 0,
flex: 1,
position: 'absolute',
zIndex: 10,
},