Reactjs 我正在通过 API(有效)从 MongoDB 传递数据.可视化但我不断收到此 TypeError: Cannot convert undefined or null to object
这是我的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) ```