what does the error mean by TypeError: Cannot read property 'join' of undefined

Question

当我点击我的导出数据按钮时，我试图将我的 React 应用程序中的数据导出为 CSV 文件格式，但是当我点击该按钮时，我也收到了这些错误消息。

  34 | 
  35 |      for(var i=0; i < A.length; ++i) 
  36 |      {
> 37 |        csvRow.push(A[i].join(","))
     | ^  38 |      }
  39 |      var csvString=csvRow.join("%0A");
  40 |

我的按钮端出现错误：

  81 |           { this.tabRow() }
  82 |         </tbody>
  83 |       </table>
> 84 |       <button onClick={() => {this.exportCsv()}}>Export Data</button>
     | ^  85 |     </div>
  86 |   );
  87 | }

这是我的 exportCsv() 的完整代码。

exportCsv() {
      var csvRow=[];
      var A = [['person', 'business', 'date', 'activity', 'hours', 'learningStatement']];
      var re = this.state.csvData;

      for(var item=0; item<re.length; item++) 
      {
        A.push([item, re[item].person], re[item].business, re[item].date, re[item].activity, re[item].hours, re[item].learningStatement);
      }
      // console.log(A);

      for(var i=0; i < A.length; ++i) 
      {
        csvRow.push(A[i].join(","))
      }
      var csvString=csvRow.join("%0A");

      var a=document.createElement("a");
      a.href='data:attachment/csv.' + csvString;
      a.target='_Blank';
      a.download= 'testfile.csv';
      document.body.appendChild(a);
      a.click();
    };

这是我的 csvData 状态：

 csvData: [
          {
            'personName': '',
            'businessName': '',
            'date': '',
            'activity': '',
            'hours': '',
            'learningStatement': ''
          }

我还没有处理过从 React 中提取 CSV 报告，所以我不知道如何进一步修复它。

Answer 1

有几个不同的问题主要与循环和数组函数的工作方式有关。我能够通过以下更改使其正常工作：

将 .person 后的括号移动到数组的末尾。以及从要推送的数组的开头删除索引 item，并更改属性名称以匹配给定的示例状态数据：

for(var item=0; item<re.length; item++) 
{
  A.push([item, re[item].personName, re[item].businessName, re[item].date, re[item].activity, re[item].hours, re[item].learningStatement]);
}

修改 for 循环以通过在每个循环结束时进行递增来与数组索引对齐（第一次迭代时 i = 0）。

for(var i=0; i < A.length; i++) 
{
  csvRow.push(A[i].join(","))
}

在 csv 字符串中添加一个逗号，这样第一列就不会被修剪。

a.href='data:attachment/csv.,' + csvString

完整工作示例

function exportCsv() {
  var csvRow=[];
  var A = [['person', 'business', 'date', 'activity', 'hours', 'learningStatement']];
  var re = [
    {
      'personName': 'test',
      'businessName': 'test',
      'date': 'test',
      'activity': 'test',
      'hours': 'test',
      'learningStatement': 'test'
    }
  ];

  for(var item=0; item<re.length; item++) 
  {
    A.push([re[item].personName, re[item].businessName, re[item].date, re[item].activity, re[item].hours, re[item].learningStatement]);
  }

  for(var i=0; i < A.length; i++) 
  {
    csvRow.push(A[i].join(","))
  }
  var csvString=csvRow.join("%0A");

  var a=document.createElement("a");
  a.href='data:attachment/csv.,' + csvString; // Add a comma here otherwise it will trim the first column
  a.target='_Blank';
  a.download= 'testfile.csv';
  document.body.appendChild(a);
  a.click();
}

what does the error mean by TypeError: Cannot read property 'join' of undefined

what does the error mean by TypeError: Cannot read property 'join' of undefined

csv

crud

reactjs