Как обновить состояние перед рендерингом в Reactjs с помощью mobx - PullRequest
Новая
       18

Как обновить состояние перед рендерингом в Reactjs с помощью mobx

0 голосов
/ 05 июля 2019

Это мой код магазина mobx.
Во-первых, необходимо выполнить projectGet (), чтобы вытолкнуть данные из хранилища. 

 @observable projectState = {
    projects: []
  };

  projectGet = () => {
    firebase
      .firestore()
      .collection("projects")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.projectState.projects.push(doc.data());
        });
      })
      .catch(err => {
        console.log("Error getting documents", err);
      });
  };

После загрузки данных в projectState их следует прочитать в другом файле .js.
Я запустил функцию внутри рендера.
Но когда я захожу на домашнюю страницу, она сначала не обновляет состояние.
Поэтому, когда я обновляю домашнюю страницу, она обновляет состояние.
Однако мне нужно обновить состояние при первом обращении к домашней странице.
Я пытался использовать 'componentWilupdate', 'ComponentDidmount' и т. Д.
Это не работает вообще.
Не могли бы вы дать мне некоторые рекомендации по этой проблеме? 

render() {
    const { Project } = this.props;
    Project.projectGet();

    return (
          <div className="col s12 m6">
            <ProjectList projects={Project.projectState.projects} />
          </div>
    );
  }

Я приложил больше кода ниже. 

import React from "react";
import ProjectSummary from "./ProjectSummary";
import { Link } from "react-router-dom";

const ProjectList = ({ projects }) => {
  return (
    <div className="project-list section">
      {projects &&
        projects.map(project => {
          return (
            <Link to={"/project/" + project.id} key={project.id}>
              <ProjectSummary project={project} />
            </Link>
          );
        })}
    </div>
  );
};

export default ProjectList;

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Используйте componendWillMount для вызова API перед рендерингом компонента, если он не обновлен, проверьте, доступны ли ожидаемые реквизиты с помощью componentWillReceiveProps метода жизненного цикла. 

componentWillReceiveProps({Project}) {
Project.projectGet();
}

После смены реквизита вы получите изменение в рендере

0 голосов
/ 05 июля 2019

Вы можете использовать componentDidMount метод жизненного цикла для выполнения вызовов API перед рендерингом, например 

componentDidMount() {
const { Project } = this.props;
Project.projectGet();
}

затем в рендере 

render() {
const { Project } = this.props;
return (
      <div className="col s12 m6">
        <ProjectList projects={Project.projectState.projects} />
      </div>
);
}
...