[n.getFullYear在传递带有react-google-charts的数组时不是函数错误

Question

我正在尝试在react-google-chart日历图表中查看日期数据。我有一系列的习惯，每个习惯都有一系列的完成天数。我正在尝试将这些完成日期映射到Chart组件，但是在DOM n.getFullYear is not a function上出现错误。问题可能是我不知道如何将数据正确地传递到Chart组件，即从数组。我应该怎么做？

这是我的代码：

//example of dateObj:
habit.completions[0] = { thisYear: 2020, thisDay: 3, thisMonth: 2 }

import React from 'react';
import Chart from 'react-google-charts';

const Habit = ({ habit, handleRemove }) => {
  if (!habit) {
    return null;
  }


  const completionDays = habit.completions.map(dateObj => {
    return [new Date(dateObj.thisYear, dateObj.thisDay, dateObj.thisMonth), 1]
  })

  const dataNotWork = [
    [
      { type: 'date', id: 'Date' },
      { type: 'number', id: 'Completions'}
    ],
    completionDays
  ]

  const dataThatWorks = [
    [{ type: 'date', id: 'Date' }, { type: 'number', id: 'Completions' }],
    [new Date(2012, 3, 13), 1],
    [new Date(2012, 3, 14), 1],
    [new Date(2012, 3, 15), 1],
    [new Date(2013, 2, 10), 1]
  ]

  console.log('completionDays', completionDays)

  return (
    <div>
      <Chart
        width={750}
        height={350}
        chartType="Calendar"
        loader={<div>Loading Chart</div>}
        data={dataNotWork}
        options={{
          title: habit.name
        }}
        rootProps={{ 'data-testid': '1' }}
      />
      <div>
        <button onClick={() => handleRemove(habit)}>Delete</button>
      </div>
    </div>
  );
};

export default Habit 

这是commentationDays返回之前的console.log

completionDays 
(2) [Array(2), Array(2)]
0: (2) [Wed Apr 01 2020 00:00:00 GMT+0300 (Eastern European Summer Time), 1]
1: (2) [Wed Apr 01 2020 00:00:00 GMT+0300 (Eastern European Summer Time), 1]
length: 2
__proto__: Array(0)

Answer 1

映射看起来不错，我相信这是您在此处将行添加到数据定义的地方...

const dataNotWork = [
  [
    { type: 'date', id: 'Date' },
    { type: 'number', id: 'Completions'}
  ],
  completionDays
]

问题是completionDays是一个数组数组。

所以而不是通过...

[new Date(2012, 3, 13), 1],
[new Date(2012, 3, 14), 1],
[new Date(2012, 3, 15), 1],
[new Date(2013, 2, 10), 1]

您正在通过...

[
  [new Date(2012, 3, 13), 1],
  [new Date(2012, 3, 14), 1],
  [new Date(2012, 3, 15), 1],
  [new Date(2013, 2, 10), 1]
]

所以它试图从数组定义中获取日期-> []

相反，连接两个数组...

var data = [
  [
    { type: 'date', id: 'Date' },
    { type: 'number', id: 'Completions'}
  ],
];

data = data.concat(completionDays);