传递带有react-google-charts的数组时，n.getFullYear不是函数错误 [英] n.getFullYear is not a function error when passing an array with react-google-charts

问题描述

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

I'm trying to view date data in a react-google-chart Calendar chart. I have an array of habits and each habit has an array of completion days. I'm trying to map these completion days in to the Chart component but get an error on the DOM n.getFullYear is not a function The problem might be that I don't know how to pass the data to the Chart component the right way, mapping from an array. How should I do this?

这是我的代码:

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

这是return之前的days.com的console.log.

Here is a console.log of completionDays before return

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)

推荐答案

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

the mapping looks fine,
I believe it is where you're adding the rows to the data definition here...

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

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

the problem is completionDays is an array of arrays.

所以不要通过...

[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]
]

因此它正试图从数组定义中获取日期-> []

so it is trying to get a date from an array definition--> []

相反，串联两个数组...

instead, concatenate the two arrays...

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

data = data.concat(completionDays);

这篇关于传递带有react-google-charts的数组时，n.getFullYear不是函数错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！