如何防止 React Native 中的多个警报？答案

【问题标题】：How to prevent multiple Alerts in React Native?如何防止 React Native 中的多个警报？
【发布时间】：2017-07-22 20:47:09
【问题描述】：

有没有办法在发送另一个之前判断屏幕上是否已经存在 Alert.alert()？

我有这个功能：

CheckInternet(){
  if(this.props.json.undefined){
    Alert.alert("Check your internet connection");
  }
}

ComponentDidUpdate(){
  this.CheckInternet();
}

问题是我在那个函数内部还有其他事情要做，我只是写了相关代码，所以我不能把CheckInternet函数放在ComponentDidUpdate之外。

问题是组件在收到json 后会更新两次，因此会发送两次警报。我想通过使用让我知道屏幕上是否已经有警报的条件来防止同时出现两个警报。我似乎在警报文档中没有找到类似的东西。有什么想法吗？

【问题讨论】：

标签： javascript react-native lifecycle alerts

【解决方案1】：

试试这个：

CheckInternet(){
    if (!this.alertPresent) {
        this.alertPresent = true;
        if (this.props.json.undefined) {
            Alert.alert("", "Check your internet connection", [{text: 'OK', onPress: () => { this.alertPresent = false } }], { cancelable: false });
        } else {
            this.alertPresent = false;
        }
    }
}

ComponentDidUpdate(){
  this.CheckInternet();
}

【讨论】：

你在哪里定义 this.alertPresent？在该州？
@LuisRizo 我实际上并没有将其设为状态变量，因为我不希望它触发重新渲染。但是你可以根据需要在constructor() 中定义它。
是的，我在想它要么处于状态，要么处于存储状态会导致重新渲染，我不知道你可以设置这样的变量，非常感谢！
谢谢，这确实有效。我在渲染方法中设置状态时遇到问题，显然这解决了它。
@TheJizel 我想在render 方法中显示警报，就像用户在TextInput 中键入时一样，它是无效的。在这种情况下，我必须表现出警觉。但是 render 方法被调用了两次，所以它显示了两个警报。那个可变的东西也没有帮助。当 CheckInternet 函数被调用两次时，变量值仍然是旧的。