Как правильно обработать данные?

Question

[Alex10214]

Есть такой код:

import React, { Component } from 'react';
import AllPositionData from "./DataPosition/AllPositionData";
import ErrorMassage from './GlobalCont/ErrorMassage';
import GlobalCont from './GlobalCont/GlobalCont';

export default class App extends Component {
    AllPositionData = new AllPositionData();
    state = {
        pos: {},
        peoples: {},
        error: true
    }

    componentDidMount() {
        this.updataPos()
        this.updataPeoples()
        // setInterval(() => this.updata(), 5000);  
    }

    updataPos() {
        this.AllPositionData.getResourcePos()
            .then(this.onDataLoadedPos)
            .catch(this.onError);
    }
    updataPeoples() {
        this.AllPositionData.getResourcePeoples()
            .then(this.onDataLoadedPeoples)
            .catch(this.onError);
    }

    onDataLoadedPos = (pos) => {
        this.setState({
            pos,
            error: false
        });
    }

    onDataLoadedPeoples = (peoples) => {
        this.setState({
            peoples,
            error: false
        });
    }

    onError = () => {
        this.setState({
            error: true
        })
    }

    render() {

        const { error } = this.state;

        if (error) {
            return <ErrorMassage />
        }

        return (
            <GlobalCont datapos={this.state} />
        )
    }
}

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

Answer 1

[abberati]

Никак. Асинхронность. Данные, которые вы пытаетесь отрендерить, ещё недоступны. Всё, что вы можете — это проверять, загрузились ли данные, и если ещё не загрузились — не пытаться к ним обратиться. Рендерить крутилку.

Comments

[Alex10214]

Подскажите пожалуйста, а как тогда правильно делать запрос? Я просто в реакте создаю компоненту в ней фетч и промисы. А как правильно понятия не имею. Буду очень благодарен.

[abberati]

Alex10214, у вас правильно. Только нужно внести изменения

...
    state = {
        pos: null,
        peoples: null,
        ...
    }
...
    render() {
      ...
      const { pos, people } = this.state
      if (!(pos && people)) return “loading...”

      return <GlobalCont pos={pos} people={people} />
    }

[Alex10214]

abberati, Большое человеческое спасибо!