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

Question

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

这是我的 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 将数组映射到组件的正确方法是什么？

Answer 1

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

rank: {} as RankInfo

这样做：

rank: [] as RankInfo[]

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

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

React/Mobx mapping observable array to components

javascript

arrays

reactjs

typescript

mobx