Javascript 如何显示来自旧组件的数据

我有一个从文件接收数据的组件。现在，当从服务器加载此数据时，它显示Loader。我希望在更新组件时，它显示的不是加载程序，而是旧组件。如果删除加载程序，则数据没有时间加载，元素显示为零。怎么做

import React, { Component } from 'react';
import {connect} from 'react-redux'
import PropTypes from 'prop-types';
import {mapToArr} from '../helpers';
import Table from './Table';
import Loader from './Loader';
import {loadAllTables} from '../AC'

class TablesList extends Component {
    static propTypes = {
        tables: PropTypes.array.isRequired,
    };

    componentDidMount() {
        const {loaded, loading, loadAllTables} = this.props;
        if (!loaded || !loading) loadAllTables();
    };

    render() {
        const { tables, loading } = this.props;
        if (loading) return <Loader/>;

        const tablesElements = tables.map(table =>
            <Table table = {table} key = {table.id}/>
        );

        return (
            <table>
                <tbody>
                    {tablesElements}
                </tbody>
            </table>
        );
    };

};

export default connect((state) => {
    return {
        tables: mapToArr(state.tables.entities),
        loading: state.tables.loading,
        loaded: state.tables.loaded
    }
}, {loadAllTables})(TablesList);

import React，{Component}来自'React'；
从“react redux”导入{connect}
从“道具类型”导入道具类型；
从“../helpers”导入{mapToArr}；
从“./Table”导入表；
从“./Loader”导入加载程序；
从“../AC”导入{loadAllTables}
类表列表扩展组件{
静态类型={
表：PropTypes.array.isRequired，
};
componentDidMount（）{
const{loaded，loading，loadAllTables}=this.props；
如果（！loaded | |！loading）loadAllTables（）；
};
render（）{
const{tables，load}=this.props；
如果（装载）返回；
const tableElements=tables.map（table=>
);
返回(
{表元素}
);
};
};
导出默认连接（（状态）=>{
返回{
表：mapToArr（state.tables.entities），
加载：state.tables.loading，
已加载：state.tables.loaded
}
}，{loadAllTables}（表列表）；

您可以更改应用程序的体系结构

让我们假设，

state.tables.entities

存储我们的数据。然后我们将

state.tables.load

更改为

state.tables.status

我们的

状态

字段必须声明为字符串变量，可以是

'FETCH'

，

'COMPLETE'

或

'DIRTY'

当状态为“脏”时，我们显示加载组件。当状态为“获取”时，我们在组件中显示旧数据

这里有一些例子：

import React，{Component}来自'React'；
从“react redux”导入{connect}
从“道具类型”导入道具类型；
从“../helpers”导入{mapToArr}；
从“./Table”导入表；
从“./Loader”导入加载程序；
从“../AC”导入{loadAllTables}
类表列表扩展组件{
静态类型={
表：PropTypes.array.isRequired，
状态：PropTypes.oneOf（['FETCH'，'COMPLETE'，'DIRTY']
};
componentDidMount（）{
const{status}=this.props；
如果（状态=='DIRTY'）加载所有表（）；
};
render（）{
const{tables，status}=this.props；
如果（状态=='DIRTY'）返回；
const tableElements=tables.map（table=>
);
返回(
{表元素}
);
};
};
导出默认连接（（状态）=>{
返回{
表：mapToArr（state.tables.entities），
状态：state.tables.status，
}
}，{loadAllTables}）（表列表）；