Question

这是我的mobx商店代码。
首先，必须执行“ projectGet（）”才能将数据从Firestore中推送。

 @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文件中读取。
我在render内部运行了函数。
但是当我进入首页时，它最初不会更新状态。
因此，当我刷新主页时，它会更新状态。
但是，我需要在首次访问主页时更新状态。
我尝试使用'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;

Answer 1

例如，您可以使用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>
);
}

Answer 2

使用componendWillMount在组件渲染之前进行API调用，如果尚未更新，请使用componentWillReceiveProps生命周期方法检查预期的道具是否可用。

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

更改道具后，您将在渲染器中更改

如何使用Mobx在Reactjs中渲染之前更新状态

2 个答案: