React：TS2786：不能用作 JSX 组件

Question

晚上好，我目前正在尝试 Adyen Web Components，它有自己的预构建卡片用户界面。但是在实现下面的代码之后，我得到了

• TS2786：“卡”不能用作 JSX 组件。
• 其返回类型“Promise”不是有效的 JSX 元素。
• 类型“Promise”缺少类型“ReactElement”中的以下属性：type、props、key

我不知道如何修复这个打字稿错误，我已经更新了 package.json 但我不知道到底该怎么做。

如有任何帮助，我们将不胜感激。

const Card = async (): Promise<JSX.Element> => {
    function handleOnChange(state, component) {
        
     state.isValid // True or false. Specifies if all the information that the shopper provided is valid.
        
              state.data // Provides the data that you need to pass in the `/payments` call.
        
              component // Provides the active component instance that called this event.
        
          }
        
        
        
          const configuration = {
        
              locale: "en_US",
        
              environment: "test",
        
              clientKey: "YOUR_CLIENT_KEY",
        
              onChange: handleOnChange
        
          };
          
          const checkout = await AdyenCheckout(configuration);
        
          const customCard = checkout.create('securedfields', {
        
            // Optional configuration
        
            type: 'card',
        
            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
        
            styles: {
        
                error: {
        
                    color: 'red'
        
                },
        
                validated: {
        
                    color: 'green'
        
                },
        
                placeholder: {
        
                    color: '#d8d8d8'
        
                }
        
            },
        
            // Only for Web Components before 4.0.0.
        
            // For Web Components 4.0.0 and above, configure aria-label attributes in translation files
        
            ariaLabels: {
        
                lang: 'en-GB',
        
                encryptedCardNumber: {
        
                    label: 'Credit or debit card number field',
        
                    iframeTitle: 'Iframe for secured card number',
        
                    error: 'Message that gets read out when the field is in the error state'
        
                }
        
            },
        
            // Events
        
            onChange: function() {},
        
            onValid : function() {},
        
            onLoad: function() {},
        
            onConfigSuccess: function() {},
        
            onFieldValid : function() {},
        
            onBrand: function() {},
        
            onError: function() {},
        
            onFocus: function() {},
        
            onBinValue: function(bin) {},
        
            onBinLookup: function(callbackObj: CbObjOnBinLookup) {}
        
        }).mount('#customCard-container');
        
          return (
            <>
            <div id="customCard-container">
        <label>
        
            <span>Card number:</span>
        
            <span data-cse="encryptedCardNumber"></span>
        
        </label>
        
        <label>
        
            <span>Expiry date:</span>
        
            <span data-cse="encryptedExpiryDate"></span>
        
        </label>
        
        <label>
        
            <span>CVV/CVC:</span>
        
            <span data-cse="encryptedSecurityCode"></span>
        
        </label>
        
        </div>
        </>
          );
        }
        
        export default Card;

Answer 1

Client React 组件不能声明为异步。您必须使用

useEffect

钩子才能使用异步函数。

类似这样的：

import {useEffect, useState} from 'react'

const Card = () => {

  // ...

  const [checkout, setCheckout] = useState()

  
  useEffect(() => {

    const getCheckout = async () => {
      const configuration = {
        locale: "en_US",
        environment: "test",
        clientKey: "YOUR_CLIENT_KEY",
        onChange: handleOnChange
      };
      const checkout = await AdyenCheckout(configuration);
      setCheckout(checkout)
    }
    getCheckout()
  }, [])
  
  // ...
}
  
export default Card;