Ionic框架结合Parse-Server导出CSV遇类型错误问题排查

嘿，我一眼就看出问题出在哪了——这是异步代码执行顺序的经典坑！

• 在JSBin的代码里，你是把CSV转换逻辑放在q.find().then()的回调里执行的，这意味着只有当Parse的查询请求完成、dataArray被成功填充数据后，才会触发CSV转换，所以objectArray[0]肯定是有值的，自然不会报错。
• 但在Ionic页面的代码中，你在构造函数里先调用this.convertQuery()，紧接着就执行this.convertToCSV(this.dataArray)。可convertQuery里的getQuery是异步操作（返回Promise），这时候dataArray还完全是空的！当convertToCSV执行到Object.keys(objectArray[0])时，objectArray[0]是undefined，直接触发了「Cannot convert undefined or null to object」的错误。

我们要确保只有当异步查询完成、dataArray被填充后，再执行CSV转换，这里有两种常用的处理方式：

方式1：把CSV转换移到异步回调内 #

修改你的TablesPage代码，将CSV转换的逻辑放到getQuery成功后的回调中：

export class TablesPage{
  dataArray = [];
  items: string; // 存储生成的CSV内容

  constructor(private parseProvider: ParseServerProvider){
    this.convertQuery();
  }

  public convertQuery(){
    return this.parseProvider.getQuery(0, 100, 'SurveyData').then((result) => {
      for (let i = 0; i < result.length; i++) {
        let object = result[i];
        this.dataArray.push(object.attributes);
      }
      // 等数据填充完成后再执行CSV转换
      this.items = this.convertToCSV(this.dataArray);
      console.log('生成的CSV:', this.items);
    }, (error) => {
      console.log(error);
    });
  }

  // 你的CSV转换函数（和JSBin的objectToCSV逻辑一致）
  private convertToCSV(objectArray: any[]): string {
    const replacer = (key, value) => value === null ? 'NaN' : value;
    // 新增容错：数组为空时直接返回空字符串
    if (!objectArray || objectArray.length === 0) return '';
    const headers = Object.keys(objectArray[0]);
    const csv = objectArray.map(row => headers.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(headers.join(','));
    return csv.join('\r\n');
  }
}

方式2：用async/await简化异步逻辑 #

如果你更喜欢更简洁的异步代码写法，可以使用async/await：

export class TablesPage{
  dataArray = [];
  items: string;

  constructor(private parseProvider: ParseServerProvider){
    // 构造函数不能直接用async，所以调用一个异步初始化方法
    this.initData();
  }

  private async initData(){
    try {
      // 等待查询请求完成
      const result = await this.parseProvider.getQuery(0, 100, 'SurveyData');
      // 填充数据
      for (let i = 0; i < result.length; i++) {
        let object = result[i];
        this.dataArray.push(object.attributes);
      }
      // 执行CSV转换
      this.items = this.convertToCSV(this.dataArray);
      console.log('生成的CSV:', this.items);
    } catch(error) {
      console.log('查询出错:', error);
    }
  }

  private convertToCSV(objectArray: any[]): string {
    const replacer = (key, value) => value === null ? 'NaN' : value;
    if (!objectArray || objectArray.length === 0) return '';
    const headers = Object.keys(objectArray[0]);
    const csv = objectArray.map(row => headers.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(headers.join(','));
    return csv.join('\r\n');
  }
}

额外的容错优化 #

我在convertToCSV函数开头加了数组为空的判断，这样即使后续遇到数据为空的情况，也不会抛出错误，而是返回一个空字符串，让代码更健壮。

内容的提问来源于stack exchange，提问作者Hope T