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

Question

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

这是我的代码：

//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 

这是一个控制台.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);