【发布时间】：2021-08-02 19:26:09
【问题描述】：
我目前正在构建一个包含大量图表的页面，并且我正在使用 Material UI 菜单来切换图表。
当我单击一个新的 MenuItem 时，它会更改我的部件状态并显示一个新的组件数组。
我现在的主要问题是，每当我单击按钮时，所有图表都会快速加载，但是对于这么多图表，这是一个问题。
我试过调试它，但老实说我找不到问题，我所有的状态都在需要设置时设置，并且 useEffects 在开始时只运行一次，所以没有额外的负载。
这是它的样子：
这就是我目前正在渲染的代码。如果您需要我的代码中的任何进一步信息，请告诉我，如果您可以为改进我的代码提供任何建议，我将很高兴，谢谢。
<>
<div className={classes.actionBar}>
<SelectEstimatedMonthForm />
</div>
<div>
<Card>
<div>
<h1>Gráficos de DRE</h1>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Todos Gráficos</MenuItem>
<MenuItem onClick={handleClose}>
Gráficos DRE Orçamento Evolução
</MenuItem>
<MenuItem onClick={handleClose}>
Gráficos de Evolução Parte 2
</MenuItem>
<MenuItem onClick={handleClose}>
Gráficos de Representatividade
</MenuItem>
</Menu>
</div>
<div>
{chartDataPart?.part1 && part === 1 && values && (
<div>
{chartDataPart?.part1?.map((data) => {
if (data?.type === "bar") {
return (
<div>
{data?.labels && (
<ChartBar
data={data}
text={data?.text}
noLabel={data?.noLabel}
stacked={data?.stacked}
newPlugin={data?.customPlugin}
/>
)}
</div>
);
} else if (data?.type === "pie") {
return (
<div>
{data?.labels && (
<ChartPie text={data?.text} data={data} />
)}
</div>
);
} else if (data?.type === "doughnut") {
return (
<div>
{data?.labels && (
<ChartDoughnut text={data?.text} data={data} />
)}
</div>
);
} else {
return (
<div>
<h1>{data?.text} esta sem type</h1>
</div>
);
}
})}
</div>
)}
{chartDataPart?.part2 && part === 2 && values && (
<div>
{chartDataPart?.part2?.map((data) => {
if (data?.type === "bar") {
return (
<div>
{data?.labels && (
<ChartBar
data={data}
text={data?.text}
noLabel={data?.noLabel}
stacked={data?.stacked}
newPlugin={data?.customPlugin}
/>
)}
</div>
);
} else if (data?.type === "pie") {
return (
<div>
{data?.labels && (
<ChartPie text={data?.text} data={data} />
)}
</div>
);
} else if (data?.type === "doughnut") {
return (
<div>
{data?.labels && (
<ChartDoughnut text={data?.text} data={data} />
)}
</div>
);
} else {
return (
<div>
<h1>{data?.text} esta sem type</h1>
</div>
);
}
})}
</div>
)}
{chartDataPart?.part3 && part === 3 && values && (
<div>
{chartDataPart?.part3?.map((data) => {
if (data?.type === "bar") {
return (
<div>
{data?.labels && (
<ChartBar
data={data}
text={data?.text}
noLabel={data?.noLabel}
stacked={data?.stacked}
newPlugin={data?.customPlugin}
/>
)}
</div>
);
} else if (data?.type === "pie") {
return (
<div>
{data?.labels && (
<ChartPie text={data?.text} data={data} />
)}
</div>
);
} else if (data?.type === "doughnut") {
return (
<div>
{data?.labels && (
<ChartDoughnut text={data?.text} data={data} />
)}
</div>
);
} else {
return (
<div>
<h1>{data?.text} esta sem type</h1>
</div>
);
}
})}
</div>
)}
{chartData && part === 0 && values && (
<div>
{chartData?.map((data) => {
if (data?.type === "bar") {
return (
<div>
{data?.labels && (
<ChartBar
data={data}
text={data?.text}
noLabel={data?.noLabel}
stacked={data?.stacked}
newPlugin={data?.customPlugin}
/>
)}
</div>
);
} else if (data?.type === "pie") {
return (
<div>
{data?.labels && (
<ChartPie text={data?.text} data={data} />
)}
</div>
);
} else if (data?.type === "doughnut") {
return (
<div>
{data?.labels && (
<ChartDoughnut text={data?.text} data={data} />
)}
</div>
);
} else {
return (
<div>
<h1>{data?.text} esta sem type</h1>
</div>
);
}
})}
</div>
)}
</div>
</Card>
</div>
</>
useEffect(() => {
const fetchDreData = async () => {
try {
const res = await http.get(
`call1`
);
const data = await res.data;
const final = data.data;
// console.log(final);
setEstimatedMonths(final);
} catch (e) {
console.log("error", e);
}
};
const fetchProductsData = async () => {
try {
const res = await http.get(
`call2`
);
const data = await res.data;
const final = data.data;
// console.log(res);
setEstimatedProducts(final);
} catch (e) {
console.log("error", e);
}
};
fetchDreData();
fetchProductsData();
// console.log("useffect1");
}, [estimatedMonthContext.monthId]);
useEffect(() => {
if (estimatedProducts && estimatedMonths) {
// console.log("useffect2");
flatData();
}
// productsFlatData();
}, [estimatedProducts, estimatedMonths]);
useLayoutEffect(() => {
// if (values) {
chart();
// console.log("useffect3");
// }
}, [values]);
【问题讨论】：
标签： javascript reactjs react-hooks material-ui