如何在 Reactjs 中使用 mobx 渲染之前更新状态答案

【问题标题】：How to update state before rendering in Reactjs with mobx如何在 Reactjs 中使用 mobx 渲染之前更新状态
【发布时间】：2023-03-10 00:10:01
【问题描述】：

这是我的 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文件中读取。
我在渲染内部运行了该函数。
但是当我进入主页时，它一开始并没有更新状态。
所以，当我刷新主页时，它会更新状态。
但是，我需要在第一次访问主页时更新状态。
我尝试使用“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;

【问题讨论】：

标签： reactjs mobx

【解决方案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>
);
}

【讨论】：

非常感谢。我试过了。但是当我重定向到 url 时它会起作用。我不知道为什么它在第一次访问时不起作用...
第一次访问遇到什么问题
我在我的问题中附加了 ProjectList.js。也就是说，当我检查状态时，状态已经定位到主页中。这必须通过 ProjectList.js 显示。但即使状态已更新，如果不重定向到 Link，ProjectList 也无法工作。

【解决方案2】：

在组件渲染之前使用componendWillMount进行API调用，如果没有更新，则使用componentWillReceiveProps生命周期方法检查预期的props是否可用。

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

一旦改变了道具，你就会在渲染中看到变化

【讨论】：