使用来自 Firebase 的数据时，卸载组件上的 setState 错误

Question

安装下面的组件后，Firebase 相关的所有内容都可以正常工作。更新 Firebase 中的数据时会出现此问题。然后我导航到不同的路线，因此卸载此组件并发生 setState 错误。

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component

我已经尝试在 componentWillUnmount 中关闭 Firebase 功能，但我似乎仍然遇到了错误。任何帮助，将不胜感激

   constructor() {

        super();

        this.state = {

            firebaseData: {}

        };

    }

    componentDidMount() {

        const { referenceId } = this.props.episode || '';

        if (referenceId) {

            this.getFirebaseData(this.removeDissallowedChars(referenceId));

        }

    }

    componentWillReceiveProps(nextProps) {

        if (this.props.values.referenceId !== nextProps.values.referenceId) {

            this.setState({

                referenceId: nextProps.values.referenceId,

            }, this.fetchWorkflows);

        }

    }

    getFirebaseData(refId) {

        const database = firebase.database().ref(`workflows/sky/${refId}`);

        database.on('value', snapshot => {

            this.setState({ firebaseData: snapshot.val() });

        }, error =>

            console.log(error)

        );

    }

    componentWillUnmount(refId) {

        const database = firebase.database().ref(`workflows/sky/${refId}`);

        database.off();

    }

    removeDissallowedChars(badRefId) {

        /**

         * BE strip characters that Firebase doesn't allow.

         * We need to do the same. Reference id will only contain the characters listed below.

         * Change needed in FE as some of our reference id's currently contain period characters.

         **/

        return badRefId.replace(/[^A-Za-z0-9-:/]+/g, '-');

    }

    fetchWorkflows() {

        const { referenceId } = this.state;

        this.props.fetchWorkflows(referenceId);

    }

Answer 1

您可以使用一个类变量来跟踪您的组件是否已安装。那看起来像这样：constructor() {    //...    this._mounted = false;}componentDidMount() {    this._mounted = true;    //...}componentWillUnmount() {    //...    this._mounted = false;}然后在异步请求后设置状态的任何地方，您可以放置一个 if 语句来检查是否_mounted为真。在你的情况下：    getFirebaseData(refId) {        const database = firebase.database().ref(`workflows/sky/${refId}`);        database.on('value', snapshot => {            // Check if component is still mounted.            if (this._mounted) {                this.setState({ firebaseData: snapshot.val() });            }        }, error =>            console.log(error)        );    }