Question

如何修复“对象可能未定义”以及为什么我会收到这个错误？

2022-01-30

1067

javascript typescript undefined fetch-api

因此 Typescript 会将 this.ratesMap.get(rate[0]) 加下划线，并告知它可能未定义。添加 ! 可解决问题，我不再收到错误，但代码无法正常工作，输出为空，终端和控制台中没有其他错误。

为什么 Typescript 会将 this.ratesMap.get(rate[0]) 加下划线，而不是 this.ratesMap.has(rate[0]) ？我该如何修复？

export class CardStore implements ICardStore {
  public lastRates: ICard[] = [];

  @observable
  public cardsArray: CurrencyCard[] = []

  @observable
  private ratesMap: Map<string, CurrencyCard> = new Map<string, CurrencyCard>();
  
  public constructor(@inject(CardApi) private api: CardApi) {
    makeObservable(this);
    this.getRates();
    this.updateRate();
  }

  @computed
  public get recentRates(): CurrencyCard[] {
    return this.cardsArray = [...this.ratesMap.values()]
  }

  private async getRates() {
    const rates = await this.api.loadRates();
    runInAction(() => {
      Object.entries(rates).forEach((rate) => {
        if (this.ratesMap.has(rate[0])) {
          this.ratesMap.get(rate[0]).update(rate[1]);
        } else {
          let newCard = new CurrencyCard(rate[0], rate[1]);
          this.ratesMap.set(rate[0], newCard);
        }
      });    
    });
  }

loadrates() 来自上述代码，位于此处：

        public async loadRates(): Promise<Record<string, number>> {
            return await fetch(
                `https://freecurrencyapi.net/api/v2/latest?apikey=MYAPIKEY&base_currency=USD`
            )
            .then(response => response.json())
            .then(data => (data.data)); 
            }
}

Answer 1

Map 的 get 方法的返回值可能为 undefined （如果映射中没有该键的条目）。TypeScript 不知道您已使用 has 调用防止了这种情况。

相反，不要使用 has （执行 has + get 通常是一种反模式 [一种几乎无害的模式 🙂]，它会强制遍历映射两次）。获取卡片并检查是否获得了一张：

private async getRates() {
  const rates = await this.api.loadRates();
  runInAction(() => {
    Object.entries(rates).forEach((rate) => {
      const card = this.ratesMap.get(rate[0]);  // ***
      if (card) {                               // ***
        card.update(rate[1]);                   // ***
      } else {
        let newCard = new CurrencyCard(rate[0], rate[1]);
        this.ratesMap.set(rate[0], newCard);
      }
    });    
  });
}

TypeScript 将能够根据 if (card) 缩小 card 的类型，因此它会知道 card 在 if 主体中不是 undefined ，并且会允许您对其使用 update 。