反应格子内存泄漏问题

时间:2020-01-29 08:57:28

标签: javascript reactjs plaid

使用memory leakage时遇到react-plaid-link-module问题。我无法通过unsubscribe方法componentWillUnmount来使用它。尝试了不同的方法,仍然收到此错误。请帮助我。

错误:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PlaidLink (at Dashboard.js:63)
    in div (at Dashboard.js:61)

代码:

import React, { Component } from 'react';
import firebase from 'firebase';
import { db } from './../../config';
import PlaidLink from 'react-plaid-link';

export default class Dashboard extends Component {
    unsubscribeUserAuthStateChangedListener = null;
    dbListener1 = null;
    dbListener2 = null;
    mounted = false;

    constructor(props) {
        this.state = {};
        this.handleOnSuccess = this.handleOnSuccess.bind(this);
    }

    async componentDidMount() {
        this.mounted = true;
        let { currentUser } = firebase.auth();
        this.unsubscribeUserAuthStateChangedListener = await firebase.auth().onAuthStateChanged(
            function(user) {
                const dbRef = 'users/' + currentUser.uid;
                this.setState({ uid: currentUser.uid, dbRef });
                this.dbListener1 = db.ref(dbRef).on('value', snapshot => {
                    let data = snapshot.val();
                    if (data && this.mounted) {
                        this.setState({ data });
                    }
                });
            }.bind(this)
        );
    }

    componentWillUnmount() {
        if (this.unsubscribeUserAuthStateChangedListener) {
            this.unsubscribeUserAuthStateChangedListener();
        }

        db.ref(this.state.dbRef).off('value', this.dbListener1);
        this.dbListener1 = null;

        this.mounted = false;
    }

    handleOnSuccess(token, metaData) {
        if (this.state.uid && metaData) {
            const newPublicToken = {
                link_session_id: metaData.link_session_id,
                public_token: metaData.public_token,
                institution: metaData.institution,
                timestamp: Date.now(),
            };
        }
    }

    handleOnExit(e) {}

    render() {
        return (
            <div>
                {this.mounted ? (
                    <PlaidLink
                        clientName="Demo"
                        env="sandbox"
                        product={['transactions']}
                        publicKey="59709e0d9510b4b4dacc7568932145"
                        selectAccount={true}
                        onExit={this.handleOnExit}
                        onSuccess={this.handleOnSuccess}
                    ></PlaidLink>
                ) : (
                    ''
                )}
            </div>
        );
    }
}

0 个答案:

没有答案