时间戳

首页 > 解决方案 > React/Mobx 将可观察数组映射到组件

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

问题描述

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

这是我的 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 获取的排名，并将其设置为“rank”，这是我的模型 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 收到的信息如下所示； 在此处输入图像描述

通常，要在组件中显示它，我会将组件设置为观察者并简单地调用 {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} 时，我总是会得到 ''rank' 中不存在 MAP''。使用 MOBX 将数组映射到组件的适当方法是什么？

标签： javascriptarraysreactjstypescriptmobx

解决方案

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

rank: {} as RankInfo

做这个：

rank: [] as RankInfo[]

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

推荐阅读