这是我的LevyChart.jsx文件

import React, { useMemo } from "react";
import { ResponsiveLine } from "@nivo/line";
import { useTheme } from "@mui/material";
import { useGetLevyQuery } from "../state/api";

const LevyChart = ({ isDashboard = false, view }) => {
  const theme = useTheme();
  const { data, isLoading } = useGetLevyQuery();

  const [levyLine, nameLine] = useMemo(() => {
    if (!data) return [];

    const { quarters } = data;
    const levyLine = {
      id: "levy",
      color: theme.palette.secondary.main,
      data: [],
    };
    const nameLine = {
      id: "name",
      color: theme.palette.secondary[600],
      data: [],
    };

    console.log("quarters", quarters);
    Object.values(quarters).reduce(
      (acc, { year, name, levy }) => {
        const curLevy = acc.levy + levy;
        const curName = acc.name + name;
    
        levyLine.data = [
          ...levyLine.data,
          { x: year, y: curLevy },
        ];
        nameLine.data = [
          ...nameLine.data,
          { x: year, y: curName },
        ];
    
        return { levy: curLevy, name: curName };
      },
      { levy: 0, name: 0 }
    );
    
    return [[levyLine], [nameLine]];
    
  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps

  if (!data || isLoading) return "Loading...";

  return (
    <ResponsiveLine
      data={view === "levy" ? levyLine : nameLine}
      theme={{
        axis: {
          domain: {
            line: {
              stroke: theme.palette.secondary[200],
            },
          },
          legend: {
            text: {
              fill: theme.palette.secondary[200],
            },
          },
          ticks: {
            line: {
              stroke: theme.palette.secondary[200],
              strokeWidth: 1,
            },
            text: {
              fill: theme.palette.secondary[200],
            },
          },
        },
        legends: {
          text: {
            fill: theme.palette.secondary[200],
          },
        },
        tooltip: {
          container: {
            color: theme.palette.primary.main,
          },
        },
      }}
      margin={{ top: 20, right: 50, bottom: 50, left: 70 }}
      xScale={{ type: "point" }}
      yScale={{
        type: "linear",
        min: "auto",
        max: "auto",
        stacked: false,
        reverse: false,
      }}
      yFormat=" >-.2f"
      curve="catmullRom"
      enableArea={isDashboard}
      axisTop={null}
      axisRight={null}
      axisBottom={{
        format: (v) => {
          if (isDashboard) return v.slice(0, 3);
          return v;
        },
        orient: "bottom",
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: isDashboard ? "" : "Quarter",
        legendOffset: 36,
        legendPosition: "middle",
      }}
      axisLeft={{
        orient: "left",
        tickValues: 5,
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: isDashboard
          ? ""
          : `Total ${view === "sales" ? "Revenue" : "Units"} for Year`,
        legendOffset: -60,
        legendPosition: "middle",
      }}
      enableGridX={false}
      enableGridY={false}
      pointSize={10}
      pointColor={{ theme: "background" }}
      pointBorderWidth={2}
      pointBorderColor={{ from: "serieColor" }}
      pointLabelYOffset={-12}
      useMesh={true}
      legends={
        !isDashboard
          ? [
              {
                anchor: "bottom-right",
                direction: "column",
                justify: false,
                translateX: 30,
                translateY: -40,
                itemsSpacing: 0,
                itemDirection: "left-to-right",
                itemWidth: 80,
                itemHeight: 20,
                itemOpacity: 0.75,
                symbolSize: 12,
                symbolShape: "circle",
                symbolBorderColor: "rgba(0, 0, 0, .5)",
                effects: [
                  {
                    on: "hover",
                    style: {
                      itemBackground: "rgba(0, 0, 0, .03)",
                      itemOpacity: 1,
                    },
                  },
                ],
              },
            ]
          : undefined
      }
    />
  );
};

export default LevyChart;

这是在MongoDB上工作的LevyDataSet

export const levyDataSet = [
    {
     year: "2017/2018",
     quarters: [
      {
       name: "Q1",
       levy: 387549
      },
      {
       name: "Q2",
       levy: 589445
      },
      {
       name: "Q3",
       levy: 603971
      },
      {
       name: "Q4",
       levy: 609281
      }
     ]
    },
    {
     year: "2018/2019",
     quarters: [
      {
       name: "Q1",
       levy: 617934
      },
      {
       name: "Q2",
       levy: 639593
      },
      {
       name: "Q3",
       levy: 640304
      },
      {
       name: "Q4",
       levy: 650134
      }
     ]
    },
    {
     year: "2019/2020",
     quarters: [
      {
       name: "Q1",
       levy: 675816
      },
      {
       name: "Q2",
       levy: 674741
      },
      {
       name: "Q3",
       levy: 764173
      },
      {
       name: "Q4",
       levy: 767220
      }
     ]
    },
    {
     year: "2020/2021",
     quarters: [
      {
       name: "Q1",
       levy: 818587
      },
      {
       name: "Q2",
       levy: 835825
      },
      {
       name: "Q3",
       levy: 861072
      },
      {
       name: "Q4",
       levy: 878795
      }
     ]
    },
    {
     year: "2021/2022",
     quarters: [
      {
       name: "Q1",
       levy: 880184
      },
      {
       name: "Q2",
       levy: 864827
      },
      {
       name: "Q3",
       levy: 928235
      },
      {
       name: "Q4",
       levy: 911216
      }
     ]
    },
    {
     year: "2022/2023",
     quarters: [
      {
       name: "Q1",
       levy: 925677
      },
      {
       name: "Q2",
       levy: 920331
      },
      {
       name: "Q3",
       levy: 1014663
      },
      {
       name: "Q4",
       levy: 1000
      }
     ]
    }
   ];

我已经为那些询问的人添加了堆栈跟踪.谢谢.

ERROR
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at http://localhost:3000/static/js/bundle.js:395:12
    at updateMemo (http://localhost:3000/static/js/bundle.js:124873:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:125449:20)
    at useMemo (http://localhost:3000/static/js/bundle.js:145462:25)
    at LevyChart (http://localhost:3000/static/js/bundle.js:379:78)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:124084:22)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:126966:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:128678:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:113676:18) 

我试着找了几个小时,修修补补.甚至用了聊天式的哈哈.没什么!可能是什么傻事.这将获取我的数据,并使用Nivo Line将其呈现为图表.

I've tried making sure the data is not null and that the data is being called correctly in the console, which is it. I've played around with the keys to try and make it work. I'm at a loss right now. 我已经为那些询问的人添加了堆栈跟踪.谢谢.

这是TypeError的堆栈跟踪:无法读取未定义的属性(正在读取""Filter"")

TypeError: Cannot read properties of undefined (reading 'filter')
    at http://localhost:3000/static/js/bundle.js:68521:89
    at mountMemo (http://localhost:3000/static/js/bundle.js:124856:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:125241:20)
    at useMemo (http://localhost:3000/static/js/bundle.js:145462:25)
    at be (http://localhost:3000/static/js/bundle.js:68520:57)
    at Ge (http://localhost:3000/static/js/bundle.js:68994:12)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:124084:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:127370:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:128666:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:113676:18) ```

推荐答案

堆栈跟踪表明存在以下问题:

   Object.values(quarters).reduce(...)

这里有一个 ts playground表示如果quartersnullundefined,则会得到该错误(Cannot convert undefined or null to object).

要解决此问题,您需要以下代码行:

if (!quarters) return [];

以下是它的背景:

const [levyLine, nameLine] = useMemo(() => {
    if (!data) return [];

    const { quarters } = data;
    const levyLine = {
      id: "levy",
      color: theme.palette.secondary.main,
      data: [],
    };
    const nameLine = {
      id: "name",
      color: theme.palette.secondary[600],
      data: [],
    };

    if (!quarters) return [];
    console.log("quarters", quarters);
    Object.values(quarters).reduce(
      (acc, { year, name, levy }) => {
        const curLevy = acc.levy + levy;
        const curName = acc.name + name;
    
        levyLine.data = [
          ...levyLine.data,
          { x: year, y: curLevy },
        ];
        nameLine.data = [
          ...nameLine.data,
          { x: year, y: curName },
        ];
    
        return { levy: curLevy, name: curName };
      },
      { levy: 0, name: 0 }
    );
    
    return [[levyLine], [nameLine]];
    
  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps

Reactjs相关问答推荐

如何在Reac.js中通过子组件和props 调用父组件函数?

在Reaction中更新状态时,我将变得未定义

在新屏幕上显示照片时出现问题-react

在数组对象内的数组上进行映射

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

取消 Select 较高组件中的所有行

滚动视图样式高度没有任何区别

React Todo List 应用程序我在实现删除功能时遇到问题

如何在react 中过滤数组的数组?

React 无效的钩子调用:如何避免嵌套钩子?

当 React 中的状态发生变化时如何停止重新加载谷歌 map ?

如何在 ChartJS 中操作 Y 轴

将 ref 转发到所有页面(路由组件)只是为了将其应用于
并具有跳过导航链接(按钮).有没有更好的办法?

无法在 reactJS 中使用空包装器 <>

页面加载时不显示数组中的数据

如何避免在 react useEffect 上滚动时出现小的延迟?

从其他组件切换 FieldSet

如何在props 更改时运行自定义挂钩?

如果 URL 已随功能组件更改,则取消刷新

React-Native PDF 注释