React + mobx не отображается при начальной загрузке страницы

Я пытался погрузиться в React+mobx, но столкнулся с проблемой. У меня есть хранилище, которое извлекает данные с сервера, и после завершения выборки полученные данные должны быть представлены на странице. Ошибка при начальной загрузке — данные не отображаются после выборки (выбранные данные уже загружены, что отображается на вкладке «Сеть» в консоли). Но если я попытаюсь снова перейти на эту страницу из меню - данные отображаются на странице.

Для понимания проблемы я подготовил репозиторий gitHub с выборкой фиктивных данных.

Тестовый репозиторий

Для воспроизведения ошибки достаточно clone репозитория. И npm i и npm start

заранее спасибо


reactjs javascript mobx
person kimonniez    schedule 08.01.2020    source источник
comment
Это хороший вопрос   -  person Aditya Tomar    schedule 08.01.2020

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел проблему (и узнал от нее :)).

Ваш магазин должен выглядеть так

export class DashboardStore extends BaseStore {

  @observable stat = []; // <-- your response is an array, so start with array

  @observable regInfo = [];
  @observable regInfoReady = false;

  fetchStat = async () => {
    const statResponse = await this.callApi('fetchStat');
    runInAction(() => { //async methods can't be marked as action, cause they are async
      this.stat = statResponse;
    });
  };
}

Удивительным для меня был тот факт, что если метод render определен как свойство со стрелочной функцией, не будет выполняться повторный рендеринг при наблюдаемом изменении.

Так что просто измените render на метод класса.

// Dashboard/index.jsx

...
render() {
    const { stat, regInfo, regInfoReady } = this.props.dashboardStore;

    return (
      <div>
        <Row gutter={16} style={{ padding: '30px 0px 30px 0px' }}>
          <Col span={8}>
            <Card title="Titles" bordered={false}>
              {stat.length && stat.map(row => (
                <div key={row.id}>
                  {row.title}
                </div>
              ))}
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
...
person felixmosh    schedule 08.01.2020
comment
ВОТ ЭТО ДА!!! Спасибо большое) Два дня гугления ничего не дали! P.S. Мой реальный ответ - объект, и здесь я просто забыл изменить stat var на массив :) - person kimonniez; 08.01.2020