React/Mobx 将可观察数组映射到组件

编程问答 2022-05-27

问题描述

我一直在尝试映射一个数组以显示每个条目的组件。这是我目前正在做的事情，

这是我的RankStore；

const RankStore = observable({
loading: false,error: "",rank: {} as RankInfo,LoadRank() {
    this.loading = true;
    this.error = "";

    GetRankInfo()
    .then(action((json:any) => {
        this.rank = json.rankDetails;
        console.log(json)
        this.loading = false;
    }))
    .catch(action((error: any) => {
        this.error = error.message;
        this.loading = false;
    }));
}
});

export default RankStore;

在这个可观察的 RankStore 中，我正在加载从 API 获取的排名，并将其设置为“排名”，这是我的模型 RankInfo 的数组，如下所示；

interface RankInfo {
serviceNumber: string
capBadge: string
endDate: string
equivalentNatoRank: string
mainTrade: string
regtCorps: string
seniorityDate: string
actingPaidRank: string
startDate: string
substantiveRank: string
}

export default RankInfo;

从 API 收到的信息看起来像这样；

enter image description here

通常，要在组件中显示此内容，我会将组件设为观察者并简单地调用 {RankStore.rank.serviceNumber}，它适用于我的其他商店，但不适用于此商店，因为数据是包含两个项目的数组。我试图将每个数组映射到一个组件，因此对于每个数组，它显示一个组件，例如 <h1> {RankStore.rank.serviceNumber} </h1> 在这种情况下，它将呈现两个组件，显示各自的服务编号。

过去我是这样做的；

          {this.state.tickets.map((ticket) => (
            <text key={ticket.id} value={ticket.id}>
              {ticket.ticketApplication.firstName}{" "}
              {ticket.ticketApplication.lastName}
            </text>
      ))}

然而，每当我尝试映射 {RankStore.rank} 时，我总是得到“MAP 不存在于‘等级’”。使用 MOBX 将数组映射到组件的合适方法是什么？

解决方法

似乎您最初将 rank 字段设置为对象，并在 API 调用后将其更改为数组。当 rank 是一个对象时，它上面没有 map 函数属性。 所以，而不是：

df['tag'] = b
df
         0      1     2     3      4     5    6     7  tag
    0  1.0   85.0  66.0  29.0    0.0  26.6  0.4  31.0    0
    1  8.0  183.0  64.0   0.0    0.0  23.3  0.7  32.0    1
    2  1.0   89.0  66.0  23.0   94.0  28.1  0.2  21.0    0
    3  0.0  137.0  40.0  35.0  168.0  43.1  2.3  33.0    1
    4  5.0  116.0  74.0   0.0    0.0  25.6  0.2  30.0    0

print(df.groupby('tag').mean().T)

tag          0      1
0     2.333333    4.0
1    96.666667  160.0
2    68.666667   52.0
3    17.333333   17.5
4    31.333333   84.0
5    26.766667   33.2
6     0.266667    1.5
7    27.333333   32.5

这样做：

rank: {} as RankInfo

初始化为 RankInfo 类型的空数组。

arraysarraysarraysjavascriptmobxmobxmobxmobxreactjsreactjsreactjsreactjstypescripttypescripttypescript