为什么 IFrame 不会在单击容器 div 时加载？

Question

背景：

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

流程

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

2. 设置maskedCardNumber 后，组件会重新渲染，并在 container-div 中显示 maskedCardNumber。此时我在 Elements 选项卡中看到，IFrame gone 对我来说非常好。现在在我的容器 div 中没有 IFrame，而是一个蒙面的卡号。

我想换个抄送号码

1. 我点击input alike div，由于setMaskedCardNumber("");，被屏蔽的卡号被删除。 （不是每个字符一个一个，而是一次一个，因为我们没有那个卡号）。到目前为止一切都很好。

问题

删除后，它应该会显示新的 iframe，因为我正在调用 loadIFrame();，就像我在初始 iframe 加载时所做的那样，但奇怪的是它直到我点击 AGAIN 才显示。是的！！你没看错。我需要再次单击以加载和 IFrame，这对我来说很奇怪。

目前尝试过

1. useState(),
2. useReducer(),
3. 在 container-div 中创建 <label>{maskedCardNumber}</label>。
4. 将 conatiner-div <div> 更改为 <input>

相关代码

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


const loadIFrame = () => {
let flex;
flex = new Flex(apiKey);
let microform = flex.microform();
let number = microform.createField('number', {
    placeholder: 'Enter card number'
});
number.on('load', () => {
    number.focus();
});
number.on('blur', () => {
  
    //transient token call
    microform.createToken({}, function(err, token) {
        if (err) {
            console.error(err);
            setCardError({
                ...error,
                token: "Please enter valid CC number"
            })
        } else {
            setCardError({
                ...error,
                token: ""
            });

            //permenant token call
            setMaskedCardNumber(JSON.parse(atob(token.split('.')[1]))["data"]["number"]);
            dispatch({
                type: orderActions.GET_CC_TOKEN,
                transientToken: JSON.parse(atob(token.split('.')[1]))['jti'],
                callbacks: {
                    success: (ccToken) => {
                        updateCardDetail({
                            type: "token",
                            token: ccToken
                        })
                    },
                    failure: (err) => {
                        console.error(err);
                        setCardError({
                            ...error,
                            token: "Please enter valid CC number"
                        })
                    }
                }
            })
        }
    })
});
number.load('#number-container');
}

    <div id="number-container" className="form-control" onClick={() => {
        setMaskedCardNumber("");
        loadIFrame();
      }}>
        {maskedCardNumber}
   </div>

Answer 1

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

试试这个效果

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

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

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

更新：

我们可以使用单个useEffect。

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

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