Javascript 无法读取React with Google charts中未定义的属性“push”

我的react和google图表出现了一个奇怪的错误，当我第一次登录显示我的图表的页面时，一切都显示得很好，但有一个地方，我导入数据以在图表上显示新值，当我导入新值时，图表消失，我得到以下错误：

Uncaught TypeError: processedData[(index + 1)] is undefined

这会显示在浏览器开发工具控制台中，当我运行调试器时，它会显示以下内容：

Uncaught TypeError: Cannot read property 'push' of undefined
/src/components/Charts/DoubleColumnChart/DoubleColumnChart.js:48
The above error occurred in the <DoubleColumnChart> component:
    in DoubleColumnChart

我读了一些关于withRouter的文档，但我不知道这是否适用于这里。这是我的全部代码：

    import React from 'react';
import { Chart } from "react-google-charts";
import { withRouter } from "react-router";

export const DoubleColumnChart = (props) => {

  const processData = (data) => {
    if (data == null) return [[]];
    if (data.labels == null) return [[]];
    var processedData = [[]];
    processedData[0].push('Category');
    data.labels.forEach(function (label) {
      var finalLabel = label[0];
      if (label.length > 1) {
        for (var i = 1; i < label.length; i++) {
          if (finalLabel.length > parseInt(160 / data.labels.length, 10)) {
            finalLabel = finalLabel + '...';
            break;
          }
          finalLabel = finalLabel + '\n' + label[i];
        }
      }
      processedData.push([finalLabel]);
    });
    console.log(data.datasets);
      data.datasets.forEach(function (dataset) {
        processedData[0].push(dataset.label);
        dataset.data.forEach(function (data, index) {
          processedData[index + 1].push(data);
        });
      });


    return processedData;
  }

  const processColors = (data) => {
    if (data == null) return [];
    if (data.datasets == null) return [[]];
    var processedColors = [];
    data.datasets.forEach(function (dataset) {
      processedColors.push(dataset.backgroundColor);
    });
    return processedColors
  }

  if (props.isVisible == false) {
    return <div></div>;
  }
  return (
    <Chart
      width={'99%'}
      height={'375px'}
      chartType="ColumnChart"
      loader={<div>Loading Chart</div>}
      data={processData(props.data)}
      options={{
        animation: {
          duration: 1500,
          easing: 'out',
          startup: true,
        },
        legend: { position: 'bottom', textStyle: { color: 'gray' } },
        vAxis: { textStyle: { color: 'gray' } },
        hAxis: { textStyle: { fontSize: 10, color: 'gray' } },
        tooltip: { trigger: 'hover', showColorCode: true },
        chartArea: {
          top: '2%',
          left: '5%',
          height: "77%",
          width: "100%",
        },
        colors: processColors(props.data),
        dataOpacity: '0.9',
      }}
      chartEvents={[
        {
          eventName: 'select',
          callback: ({ chartWrapper }) => {
            const chart = chartWrapper.getChart()
            const selection = chart.getSelection()
            if (selection.length === 1) {
              const [selectedItem] = selection;
              const { row } = selectedItem;
              var labelData = props.data.labels[row];
              var finalLabel = '';
              for (var i = 0; i < labelData.length; i++) {
                finalLabel = finalLabel + labelData[i];
              }
              finalLabel = finalLabel.replace(/ /g, '');
              if (props.onSegmentClick) props.onSegmentClick(finalLabel);
            }
          },
        },
      ]}
      rootProps={{ 'data-testid': '1' }}
    />
  );
}

---

有人能帮我吗？谢谢。

当您使用索引+1逻辑将数据推送到数组时，您应该检查数组的下一个索引是否存在，然后将数据推送到该索引，或者将下一个索引转换为数组，然后再推送。 因此，类型安全的方法是这样的：

if(Array.isArray(processedData[index + 1])) {
    processedData[index + 1].push(data);
}else {
   processedData[index + 1] = [data]
}

---

在javascript中，可以在数组上使用push方法

例如：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

但在下面的方法中，您使用的是processedData[0].pushdataset.label，这类似于访问数组的第一个元素并将其推入，这是错误的。您可以像processedData.pushdataset.label一样操作

  data.datasets.forEach(function (dataset) {
        processedData[0].push(dataset.label);
        dataset.data.forEach(function (data, index) {
          processedData[index + 1].push(data);
        });

---

谢谢你们，这看起来很有效，我的图表显示，但我在控制台中遇到以下错误，我应该如何抑制它？未捕获的承诺错误：第6行有2列，但必须有3列据我所知，您有3列而不是2列。检查列的长度，确保有两列。

  data.datasets.forEach(function (dataset) {
        processedData[0].push(dataset.label);
        dataset.data.forEach(function (data, index) {
          processedData[index + 1].push(data);
        });