React + mobx在初始页面加载时不呈现

Question

我试图深入研究React + mobx，但遇到了一个问题。我已经存储了从服务器获取数据的过程，并且在获取结束后，必须在页面上表示获取的数据。错误在于初始加载-提取后未呈现任何数据（已加载的已加载数据显示在控制台的“网络”标签中）。但是，如果我尝试从菜单再次进入此页面-数据呈现在页面上。

为了理解一个问题，我已经准备了gitHub repo来获取虚拟数据

Test repo

[为了复制错误，只需clone回购。并且npm i和npm start

提前感谢

Answer 1

我已经找到了问题（并从中学习了：））。

您的商店应该看起来像这样

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>
    );
  }
...