0

背景：

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

流动

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

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

我想更改抄送号码

  1. 我单击输入相似的 div并且由于setMaskedCardNumber("");. （不是每个字符一个一个，而是一次一个，因为我们没有那个卡号）。到此为止，一切都很好。

问题

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

到目前为止尝试过

  1. useState(),
  2. useReducer(),
  3. <label>{maskedCardNumber}</label>在容器 div 内制作。
  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>
4

1 回答 1

1

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

试试把这个效果

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

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

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

更新：

我们可以使用 single useEffect。

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

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

于 2020-10-22T12:58:05.610 回答