Как отобразить страницу после загрузки всех данных? - PullRequest
Новая
       10

Как отобразить страницу после загрузки всех данных?

0 голосов
/ 17 февраля 2019

В моем приложении React есть страница с таблицей.В таблице три столбца и определенное количество строк (например, 10, то есть 10 записей в таблице).Данные для каждого из трех столбцов получаются в результате трех разных запросов к базе данных (к различным таблицам в базе данных).В результате, когда эта страница загружается в таблицу, иногда только один из трех столбцов заполняется (выполняется только один из запросов), а после перезагрузки страница заполняется.

Примомент, когда я сделал следующее: для каждого запроса к базе данных есть функция с запросом выборки.Вызов всех этих функций происходит в 

componentDidMount()

Как правильно отобразить страницу только после всех данных, полученных из базы данных?

Ответы [ 3 ]

0 голосов
/ 17 февраля 2019

В настоящее время вы можете сделать что-то вроде этого: 

class MyTableComponent {
    state = {
        loaded: false
    }

    componentDidMount() {
        Promise.all([this.fetchColumn1(), this.fetchColumn2(), this.fetchColumn3()])
            .then(([column1, column2, column3]) => {
                // Do whatever you want with columns
                this.setState({loaded: true, columns: {column1, column2, column3}})
            });
    }

    render() {
        // render nothing until everything is loaded (You can replace it with loading state
        if(!this.state.loaded) return null;
        else return <Table columns={this.state.columns} />
    }

В будущем, с помощью response-cache, можно будет выполнять ту же работу очень аккуратно 

const App = (props) => {
    return (
        <Suspense fallback={<p>Loading</p>}
            <MyTable />
        </Suspense>
    )
}

const getColumn1 = () => {...}
const getColumn2 = () => {...}
const getColumn3 = () => {...}
const getColumns = () => Promise.all([getColumn1, getColumn2, getColumn3])
const columnsResource = createResource(getColumns)
const MyTableComponent = (props) => {
    let [column1, column2, column3] = columnsResource.read();

    // Columns will be fetched at this point, unless this line will now execute and nearest parrent suspense fallback will get rendered
    return <Table columns={{column1, column2, column3}} />
}
0 голосов
/ 17 февраля 2019

После того, как все 3 вызова для извлечения данных для 3 столбцов выполнены, только вы должны вызывать метод componentDidMount.В настоящее время кажется, что только с одним выходным вызовом ajax вы вызываете этот метод.

Моя рекомендация состоит в том, что из пользовательского интерфейса вы должны сделать только один вызов вашему внутреннему слою.А из вашего внутреннего кода сделайте 3 вызова, чтобы получить данные из 3 таблиц и вернуть результат в пользовательский интерфейс.Таким образом, в целом к ​​интерфейсу будет только один вызов из пользовательского интерфейса, что также немного повысит производительность.

0 голосов
/ 17 февраля 2019

без кода не может сказать много, но, возможно, стоит подумать о реализации обещаний / (async / await), чтобы рендер ожидал получения всех данных и затем отображал их

...