访问数组对象时获取“无法读取未定义的属性”答案

【问题标题】：Getting 'Cannot read property of undefined' when accessing an array object访问数组对象时获取“无法读取未定义的属性”
【发布时间】：2021-11-02 13:18:06
【问题描述】：

我根据从 HTTP 请求中检索到的元素定义了这个对象。问题是我试图访问对象数组中的这些元素，我得到这个“无法读取未定义的属性”错误。你能告诉我哪里出错了吗？因为我认为我以正确的方式访问它。 console image

app.module.ts

export class AppComponent {
  ...
  public blockchain;

  constructor(private blockchainService: BlockchainService) {
    this.blockchain = blockchainService.blockchainInstance;
  }

  ngOnInit() {
  }
  ...
}

对象类

export class BlockchainDB {
  id?: any;
  provider?: string;
  recipient?: string;
  rxInfo?: string;
  timestamp?: string;
  published?: boolean;
}

代码

export class BlockchainService {

  ...
  currentBlockchain: BlockchainDB = {
    rxInfo: '',
    provider: '',
    recipient: '',
    timestamp: '',
    published: false
  };
  ...
  public sampledata = [];
  public arraydata3: BlockchainDB [];

  constructor(private blockchainService: BlockchainDBService) {
    this.retrieveBlockchain();
    this.createChainData();

    console.log(this.arraydata3);
    console.log(this.arraydata3[0].rxInfo);
  }

createChainData() {
    this.getBlockchain('1', 0);
    this.getBlockchain('2', 1);
   }

  getBlockchain(id: string, seqnr: number): void {
    console.log(id);
    this.blockchainService.get(id)
      .subscribe(
        data => {
          this.currentBlockchain = data;
          this.arraydata3.push(this.currentBlockchain);
          console.log(data);
        },
        error => {
          console.log(error);
        });
   }

调试日志

1
blockchain.service.ts:78 2
blockchain.service.ts:50 Array(2)0: {id: 1, provider: "steve", recipient: "me", rxInfo: "{brandname:neozep,genericname:paracetamol,prescribedDosageCount:20}", timestamp: "1630747314781", …}1: {id: 2, provider: "qwerty", recipient: "trewq", rxInfo: "{brandname:biogesic,genericname:paracetamol,prescribedDosageCount:20}", timestamp: "1730747314781", …}length: 2[[Prototype]]: Array(0)
core.js:6479 ERROR TypeError: Cannot read property 'rxInfo' of undefined
    at new BlockchainService (blockchain.service.ts:51)
    at Object.BlockchainService_Factory [as factory] (blockchain.service.ts:122)
    at R3Injector.hydrate (core.js:11438)
    at R3Injector.get (core.js:11257)
    at NgModuleRef$1.get (core.js:25332)`enter code here`
    at Object.get (core.js:25046)
    at lookupTokenUsingModuleInjector (core.js:3342)
    at getOrCreateInjectable (core.js:3454)
    at Module.ɵɵdirectiveInject (core.js:14737)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:9)
defaultErrorLogger @ core.js:6479
main.ts:12 TypeError: Cannot read property 'rxInfo' of undefined
    at new BlockchainService (blockchain.service.ts:51)
    at Object.BlockchainService_Factory [as factory] (blockchain.service.ts:122)
    at R3Injector.hydrate (core.js:11438)
    at R3Injector.get (core.js:11257)
    at NgModuleRef$1.get (core.js:25332)
    at Object.get (core.js:25046)
    at lookupTokenUsingModuleInjector (core.js:3342)
    at getOrCreateInjectable (core.js:3454)
    at Module.ɵɵdirectiveInject (core.js:14737)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:9)

【问题讨论】：

你是如何实例化BlockchainService的？看起来getBlockChain 也有一些异步逻辑，你在完成之前调用console.log(this.arraydata3[0].rxInfo)。
嗨，摩根，我在这里所做的是从我自己创建的 api 中检索数据。奇怪的是，在我的代码中 console.log(this.arraydata3);没有显示错误。但是 console.log(this.arraydata3[0].rxInfo);显示错误。这就是为什么我在想，当我调用 rxinfo 时数据应该已经可用。在此之前，我已经输出了全部数据。
当您打印整个数据时，控制台中显示了什么？您的示例也没有显示 retrieveBlockchain 的代码。我建议您的控制台语句是在设置实际数据之前发生的。什么是this.blockchainService？
在subscribe回调中将console.log(data);改为console.log(this.arraydata3[0].rxInfo);

标签： javascript arrays angular typescript object

【解决方案1】：

订阅中的代码在api调用完成时执行，是异步的。

因此，“console.log(this.arraydata3[0].rxInfo);”在“this.arraydata3.push(this.currentBlockchain);之前执行"

您可以按照solution 处理这种异步行为

【讨论】：

正如 morgan 和 safir 所提到的，这是由于异步行为造成的。我不得不改变我的代码中的一些逻辑。谢谢，