javascript - 无法在 React js 和 firestore 中对未安装的组件执行 React 状态更新

Question

我知道这些论坛里有这个问题，但是我用了那些方法，错误依旧:

我使用 componentDidMount 从 firestore 加载数据，并使用 componentWillUnmount 将变量 _isMounted 应用到 f​​alse。

我在表中的代码是这样的:

import React, { Component } from 'react';
import DashboardNavBar from '../../components/navbar/navbarDashboard';
import TableBox from './boxTable';
import TableSalary from './employs';
import TableExpenses from './expensesTable';
import firebase from '../../config/fbConfig';
import Grid from '@material-ui/core/Grid';
import CircularProgress from '@material-ui/core/CircularProgress';

export default class TableCount extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        if (verifyBusinessData()) {
            return (
                <Grid
                container
                spacing={0}
                direction="column"
                alignItems="center"
                justify="center"
                style={{ minHeight: '100vh' }}
                >
                    <CircularProgress />
                </Grid>
            );
        }  else {
            return (
                <div className="tables-page">
                    <DashboardNavBar />

                    <div className="container-panels">

                        <h2 className="titlePage">Tablas</h2>

                        { /*<div className="tables-div-cards">
                            { this.renderUsersCards() }
                        </div> */}

                        <div className="tables-container table-top">

                            <div className="tables-container-first">
                                <div className="tables-first">
                                    <TableBox />
                                </div>

                                <div className="tables-second">
                                    <TableSalary />
                                </div>
                            </div>

                            <div className="tables-third">
                                <TableExpenses />
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

在 tableBox 中:

import React from 'react';
import MaterialTable from 'material-table';

export default class MaterialTableDemo extends React.Component {

    _isMounted = false;

    constructor(props) {
        super(props)

        this.state = {
            data: [],
            isLoading: true,
        }

    componentDidMount() {
        this._isMounted = true;

        if (this._isMounted)
        {
            this.loadSalary();
        }
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    loadSalary() {
        // Load data from firestore
    }

    render() {

        if (!this.state.isLoading) {
        return (
            <div>

            <div className="table-icon-div">
                <div className="table-icon turquoise-icon"><img src={ require('../../img/icons/expenses-white.png') } /></div>
                <h3 className="table-icon-title">Caja</h3>
            </div>

            // render the material table but skip the unnecessary code
            <MaterialTable
                style={stiles.title}
                icons={tableIcons}
                title="Caja"
                columns={this.state.columns}
                data={this.state.data}
            > 
            </MaterialTable>  

            </div>
        );
        } else {
            return (
            <div>Loading...</div>
            );
        }
    }
}

我应用了方法 componentWillUnmount 但不起作用。

Answer 1

如果您使用 loadSalary 中的 promise 异步设置状态，则可能是您的组件在 promise 解决之前已卸载。如果是这种情况，您应该在设置状态之前检查 this._isMounted，例如:

loadSalary() {
  fetchSalary().then(data => {
    if (this._isMounted) {
      this.setState({ data });
    };
  });
}

我在这里做了一些假设，如果您更新代码以显示 loadSalary 实现，这会有所帮助。