如何使用本机反应防止多个警报呈现？答案

【问题标题】：How to prevent multiple alert rendering using react native?如何使用本机反应防止多个警报呈现？
【发布时间】：2021-03-18 15:44:56
【问题描述】：

就我而言，我在渲染部分使用alert component，而我正在执行应用程序，因为multiple time rendering 我的警报也调用了两次或更多次。当警报已经显示时，我必须 prevent 它。

我的代码在这里：

return (    
      { alert rendering condition (
        <AlertPack
          title= ""
          subTitle=""
          alertButtons={[
            {
              text: "ok",
              onPress: () => {....}
            },
            {
              text: "cancel",
              onPress: () => {....},
            },
          ]} 
        />
      )}
)

【问题讨论】：

标签： android ios typescript react-native

【解决方案1】：

在渲染视图上显示Alert 不是最佳做法。当某些条件在某些操作（例如按钮按下或最初在屏幕安装时）为真时显示警报的最佳方式。

现在，您可以做一些解决方法，例如

 constructor(props) {
    super(props);

    this.state = {
      showAlert: false, // default false so don't show
    };
  }

  componentDidMount() {
    this.setState({
      showAlert: true, // reset state on your condition to show alert. I've done on screen mount
    })
  }

  render() {

    { this.state.showAlert ? (
        <AlertPack
          title= ""
          subTitle=""
          alertButtons={[
            {
              text: "ok",
              onPress: () => {....}
            },
            {
              text: "cancel",
              onPress: () => {....},
            },
          ]} 
        />
      ) : null }
  }

【讨论】：

是的，我同意。到目前为止，我们必须在不更改太多代码的情况下提供快速解决方案。请告诉我如何预防。
非常感谢。我会检查并更新它
还有其他选择吗？
@Devapp 我已经更新了我的答案，请检查
它不工作。我可以将它创建为一个单独的函数，即使它也不起作用

【解决方案2】：

这不是最佳实践，但无论您是否显示警报，您都可以使用另一个参数并使用Effect 来更改该参数。您还需要将您的条件更改为；

alertCondition && !alerted

    const [alertCondition, setAlertCondition] = useState(false);
    const [alerted, setAlerted] = useState(false);


    useEffect(() => {
        if(alertCondition)
            setAlerted(true);
        else
            setAlerted(false);
    }, [alertCondition]);

【讨论】：

谢谢，我会检查
您能否在不使用 useEffects 的情况下更新您的代码。我正在使用类组件。