为什么IFrame不在容器div上单击一次就加载

Question

背景：

致力于Cybersource信用卡与React应用程序的集成。在弹出字段(onBlur(时，需要显示来自API响应的屏蔽卡号。

流量

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

2. 设置maskedCardNumber后，组件将被重新渲染，并在container-div中显示maskedCardNumber。在这一点上，我在元素选项卡中看到，IFrame已经不见了，这对我来说非常好。现在在我的容器div中没有IFrame，只有一个掩码卡号。

我想更改CC编号

3. 我点击输入类似的div，由于setMaskedCardNumber("");，屏蔽卡号被删除。(不是每个字符一个接一个，而是一次全部输入，因为我们没有那个卡号(。到目前为止一切都很好

问题

删除后，它应该显示新的Iframe，因为我调用loadIFrame();，就像我在初始Iframe加载时一样，但奇怪的是，直到我再次单击，它才显示。是的！！你读对了。我需要再次点击加载和IFrame，这对我来说很奇怪。

目前已尝试

1. CCD_ 6
2. CCD_ 7
3. 使CCD_ 8在container-div
4. 将控制器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都会在成功清空时加载。

更新：

我们可以使用单个CCD_ 14。

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

有了这个，我们可以确保只有在apiKey存在的情况下才加载IFrame，否则不要尝试加载，因为IFrame依赖于apiKey。