如何在 React Native 中的 setState 之前停止执行
Posted
技术标签:
【中文标题】如何在 React Native 中的 setState 之前停止执行【英文标题】：How to stop execution until a setState in React Native 【发布时间】：2019-07-28 02:40:36 【问题描述】：最近创建了注销功能。当用户单击注销时，将提示他们一个对话框，询问“您确定要注销吗？”。对于 Dialog ，我使用了一个名为 react-native-popup-dialog 的包。
实际上，发生的事情是因为这个应用程序与 redux 结合在一起。我将操作用于注销功能。对于对话框，我使用了组件级状态。
我的对话代码：
<Dialog
visible=this.state.showDialog
dialogTitle=
<DialogTitle
title="Confirm Logging Out"
textStyle= fontSize: 15
/>
width=0.8
footer=
<DialogFooter>
<DialogButton
text="CANCEL"
textStyle= fontSize: 14
onPress=() =>
this.setState( showDialog: false );
/>
<DialogButton
text="CONFIRM"
textStyle= fontSize: 14
onPress=() =>
this.onLogoutPress();
/>
</DialogFooter>
onTouchOutside=() =>
this.setState( showDialog: false );
>
<DialogContent>
<Text style= fontSize: 14, top: 10 >Are you sure you want to logout ?</Text>
</DialogContent>
</Dialog>
还有我的注销按钮代码：
<TouchableOpacity onPress=()=> this.setState( showDialog: true) >
<CardItem>
<Icon name="log-out" style= color: '#03A9F4' />
<Body>
<Text>Logout</Text>
</Body>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
</TouchableOpacity>
所以我的onLogoutPress() 代码：
onLogoutPress()
this.setState( showDialog: false ,() =>
this.props.logOut(() =>
this.props.navigation.dispatch(resetActionToWelcome);
)
)
我面临的问题是，当我单击确认按钮时，"onLogoutPress()" 会弹出，并且对话框不会关闭，而不是 react 导航的 resetAction 会弹出。由于 setstate 是异步功能，我认为它需要时间才能恢复，其中注销操作会迅速启动，并且应用程序会从启动屏幕启动。但直到对话框保持打开状态。
如何处理？
【问题讨论】：
【参考方案1】：改变你的功能，如下所示，
希望它对你有用 第一种方法，
onLogoutPress()
this.setState( showDialog: false ,() =>
setTimeout(() =>
this.props.logOut(() =>
this.props.navigation.dispatch(resetActionToWelcome);
)
, 500);
)
使用箭头函数的另一种方式，
onLogoutPress = () =>
this.setState( showDialog: false ,() =>
this.props.logOut(() =>
this.props.navigation.dispatch(resetActionToWelcome);
)
)
【讨论】：
实际上，它是一种解决方法，对吗？但是面对这个问题的实际方法是什么？ 是的，你的方法是对的，但我不知道为什么它不起作用，所以我建议我的方法 setState 是异步函数，它一直等到不使用箭头函数设置状态 找不到你吗？ 你第一个正在工作，但我认为这不是一个干净的方法？以上是关于如何在 React Native 中的 setState 之前停止执行的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 react-native 中的默认 fontFamily
如何在 React Native 中的 setState 之前停止执行
如何使用给定的 nativeID 识别目标 c 中的视图（在 react-native 中给出）