如何解决Stripe元素的react导致重定向内存泄漏的问题。

Posted 2023-01-10

我有一个组件，在这个组件中，我给我的用户提供了一个订阅的选项，以从应用程序中删除广告。我完美地集成了Stripe，直到我来到应用程序的重定向部分。因为我不想让人们创建多个订阅，如果我的用户有一个活跃的订阅（我从firebase db获得），那么我想把我的用户重定向到另一个页面。一旦重定向发生，我就会看到一个内存泄漏的警告。在尝试导航回订阅组件后，这种情况就不会再发生了。这是我的组件，去掉了大部分不会导致错误显示的代码。我认为这是条纹元素，因为如果我删除对该组件的调用，那么所有的工作都很好，没有内存泄漏。有没有人遇到过这个问题，并且有解决方法？

我觉得这与我使用React.useEffect钩子设置显示表单的方式有关。任何帮助都是非常感激的

import React,  Component  from 'react';
import  compose  from 'recompose';
import  Elements  from '@stripe/react-stripe-js';
import  loadStripe  from '@stripe/stripe-js';
import  Redirect  from 'react-router-dom';
import StripeForm from '../components/StripeForm';
import Grid from '@material-ui/core/Grid';


import 
    AuthUserContext,
    withAuthorization,
    withEmailVerification,
 from '../components/Session';
import  withFirebase  from '../components/Firebase';
const stripePromise = loadStripe('stripe-key-here');



const AccountPage = (props) => 
    const show = props.firebase.userData.stripe.subscriptions.subscription.plan.active
    const [showForm, setShowForm] = React.useState(show)

    React.useEffect(() => 
        if (show !== showForm) 
            setShowForm(show);
        
    , [show, showForm])

    return (

        <AuthUserContext.Consumer>
            authUser => 
                return (
                    <>
                        showForm ? <Redirect to="/thank-you" /> : null
                        <Grid container spacing=3 style= background: '#fff', maxWidth: '94%', margin: '20px auto', borderRadius: 7 >
                            <Grid item xs=12 sm=6 style= padding: '20px 50px', textAlign: 'justify', >
                                <UpgradeMessage />
                            </Grid>
                            <Grid item xs=12 sm=6 style= padding: '20px 50px' >
                                <div style= textAlign: 'justify' >
                                    <h3>Purchase a subscription for $9/year!</h3>
                                    <p>Purchasing a subscription will remove the ads from the app and will help us stay up and running!</p>
                                </div>
                                <Elements stripe=stripePromise>
                                    <div style= padding: 15, borderRadius: 10, border: 'solid 4px #fafafa' >
                                        <StripeForm setShowForm=setShowForm firebase=props.firebase authUser=authUser />
                                    </div>
                                </Elements>
                            </Grid>
                        </Grid>
                    </>
                )
            
            
        </AuthUserContext.Consumer>
    )
;

class LoginManagementBase extends Component 
    constructor(props) 
        super(props);

        this.state = 
            activeSignInMethods: [],
            error: null,
        ;
    

    render() 
        return (
            <div>
                <button onClick=() => this.props.firebase.doSignOut()>Log out of this app!!!</button>
            </div>
        );
    


const LoginManagement = withFirebase(LoginManagementBase);

const condition = authUser => !!authUser;

export default compose(
    withEmailVerification,
    withAuthorization(condition),
    withFirebase,
)(AccountPage);

答案

你可能需要研究一下StripeForm来解决这个问题。

在调用StripeForm后会发生什么？setShowForm? 我想在 setShowForm但是，随着重定向从 setShowForm 被调用。网格，元素和StripeForm组件未被挂载，并给你这个警告。

如果这确实是你的问题。setShowForm 应该是您在StripeForm中做的最后一件事，当它要重定向时。

与Formik类似的情况是，在那里你有这个警告。

警告： 不能在一个未挂载的组件上执行React状态更新。 这是一个没有操作的问题，但它表明你的应用程序中存在内存泄漏。 要修复，请在useEffect清理函数中取消所有订阅和异步任务。

当你提交你的表单时，你调用一些动作来保存它，一旦它完成了，Formik需要知道它已经完成了与 setSubmitting(false);. 这是它如何去。

callSomeSaveAction(...)
.then(...)
.catch(...)
.finally(() => setSubmitting(false));

它工作得很好，直到你决定在callSomeSaveAction.then中使用一个重定向。

这是因为重定向卸载了formik组件，但setSubmitting还是被调用了。

希望你能用这样的方法来解决你的问题.因为我知道由于重定向，组件将被卸载，所以我不需要 setSubmitting(false) 当我重定向时，但我仍然需要它，以防发生错误。

callSomeSaveAction(...)
.then(...)
.catch(() => 
    ...
    setSubmitting(false);
);