Не удается выполнить обновление состояния React для неустановленного компонента в React js и firestore

Question

Я знаю, что этот вопрос существует на этих форумах, но я использовал эти методы, и моя ошибка остается той же:

Я использую componentDidMount для загрузки данных из firestore и componentWillUnmount для применения переменной _isMounting к false.

Мой код в таблице такой:

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>
            );
        }
    }
}

Я применяю компонент методаWillUnmountно не работает.

Answer 1

Если вы устанавливаете состояние асинхронно с обещанием в loadSalary, возможно, ваш компонент отключен до разрешения обещания. Если это так, вы должны проверить this._isMounted перед установкой состояния, например:

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

Я делаю некоторые предположения здесь, было бы полезно, если бы вы обновили свой код, чтобы показать реализацию loadSalary.

Answer 2

За документы , изменения состояния не разрешены в

componentwillunmount

Состояние все равно будет уничтожено. Не уверен, чего ты пытаешься достичь.