如何修复错误“只能创建一个 cardNumber 类型的元素”？

问题描述

大家好，在 Drew Reese 的建议下，我想在这里提出与 this one 非常相似的问题，所以事情是这样的。我的 React 应用程序主要构建在基于类的组件上，但其中一些是功能性的。 我有一个用于添加新卡片的条纹表单，它看起来像这样。

添加NewCardStripeForm.js

function AddNewCardStripeForm({secret,error,backLink,...props}) {
    const stripe = useStripe();
    const elements = useElements();

    const [cardNumberError,setCardNumberError] = useState('');
    const [validThruError,setValidThruError] = useState('');
    const [cvvError,setCvvError] = useState('');

    const handleSubmit = async (event) => {
        event.preventDefault();
        ...
        const {history} = props;

        history.push(backLink);
    };

    useEffect(() => {
        const cardNumberElement = elements.create('cardNumber');
        cardNumberElement.mount('#card-number-element');

        const validTruElement = elements.create('cardExpiry');
        validTruElement.mount('#card-valid-thru-element');

        const cvvElement = elements.create('cardCvc');
        cvvElement.mount('#card-cvv-element');

    },[]);


    return (
        <ElementsConsumer>
            {({elements,stripe}) => (
                <form onSubmit={handleSubmit}>
                    <div id="card-number-element"/>
                    <div id="card-valid-thru-element"/>
                    <div id="card-cvv-element"/>

                    <Button type="submit" title="Save card"/>
                </form>
            )}
        </ElementsConsumer>
    )
}

export default withRouter(AddNewCardStripeForm);

当表单第一次加载时，一切正常。没有问题，一切正常。 但是当我提交表格时。并且历史记录“返回”被调用，或者即使我没有提交，也只是从页面返回并尝试使用表单打开页面我得到一个错误：Uncaught IntegrationError: Can only create one Element of type cardNumber. 在此错误触发下一个之后

    The above error occurred in the <AddNewCardStripeForm> component:
    in AddNewCardStripeForm (created by Context.Consumer)
    in withRouter(AddNewCardStripeForm) (created by AddNewCard)
    in div (created by AddNewCard)
    in div (created by AddNewCard)....

React will try to recreate this component tree from scratch using the error boundary you provided,AppContainer.

我的 AddNewCardStripeForm 在接下来的基于类的组件中被调用：

@inject('mobxStore')
@observer
class AddNewCard extends Component {
    constructor(props) {
        super(props);
        ...
    }

    componentDidMount() {
        this.props.userinfoProfile();
        this.getClientSecret();
    }

    ....

    render() {
        ...

        return (
            <div className={styles.main_asset}>
                <Header title={title} type="action" back={back}/>
                <Menu/>
                <div className={styles.page}>
                    <AddNewCardStripeForm
                        waiting={waiting}
                        userDetails={details}
                        secret={secret}
                        error={errorMessage}
                        backLink={back}/>
                </div>
            </div>
        )
    }
}
...

export default withRouter(connect(mapStatetoProps,mapdispatchToProps)(AddNewCard));

正如您在表单组件中看到的，我在 [] 中使用 useEffect 作为依赖项，因此它应该被调用一次，但每次都会调用。 我该如何解决这个问题？也许我应该在我的 if elements inited or mounted 中添加一些像 useEffect 这样的检查？有什么建议吗？

为了以防万一它会有所帮助，我将从我加载应用程序的 index.jsx 添加代码

....
render(
    <AppContainer>
        <Provider store={store}>
            <MobxProvider mobxStore={mobxStore}>
                <Elements stripe={stripePromise}>
                    <ConnectedRouter history={history}>
                        <Route component={Routes}  history={history}/>
                    </ConnectedRouter>
                </Elements>
            </MobxProvider>
        </Provider>
    </AppContainer>,document.getElementById("application")
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）