为什么在单击div容器时不能加载iframe？

编程问答 2022-06-07

问题描述

背景：

致力于将Cyber​​source信用卡与React应用集成。选中（onBlur）字段后，需要显示来自API响应的屏蔽卡号。

流量

  1. 创建了一个容器div，在其中加载了iframe，然后输入了CC号。在blur事件中，执行API调用以进行验证并获取屏蔽的卡号（如果成功验证）。

  2. 在设置maskedCardNumber时，组件将重新呈现，并在container-div中显示maskedCardNumber。在这一点上，我在“元素”标签中看到，IFrame已经消失了。现在，在我的容器div中，没有IFrame，而是带掩码的卡号。

我想更改抄送号码

  1. 我点击 div相同的输入

解决方法

我在这里看到的问题基本上是由于iFrame的异步特性，在您加载setMaskedCardNumber()调用后返回的响应。

尝试使用这种效果

  useEffect(()=>{
    if(maskedCardNumber === ""){
      loadIFrame()
    }
  },[maskedCardNumber])

并从loadIFrame();处理程序中删除onClick()

这将确保每当您清空cardNumber状态时，都会在成功清空iFrame时加载它。

更新：

我们可以使用单个useEffect。

  useEffect(() => {
    if (apiKey && !maskedCardNumber) {
      loadIFrame();
    }
  },[apiKey,maskedCardNumber])

这样，我们可以确保仅在apiKey存在时才加载IFrame，否则不要尝试加载，因为IFrame依赖于apiKey。

credit-cardcybersourceiframeiframejavascriptreactjsreactjsreactjsreactjs