来自 api 的数据未显示在 ChartJS 中

Question

`'从 'react' 导入 React, { useState, useEffect }; import { Chart as ChartJS, BarElement } from 'chart.js/auto'; 从'react-chartjs-2'导入{Bar};

ChartJS.register( 条形元素， );

常量条形图 = () => { const [图表, setChart] = useState({}); const [coins, setCoins] = useState([]);

const coinIds = ['比特币', 'ethereum', 'cardano'];

const apiKey = '6303b0c3-fa99-45cc-9b0c-cca70a6f0398';

useEffect(() => { const fetchCoins = async () => { const coinPromises = coinIds.map((id) => { 返回获取（

https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest?symbol=${id}

，{ 标题：{ '内容类型'：'应用程序/ json'， 'X-CMC_PRO_API_KEY'：

${apiKey}

， }, }) .then((响应)=>{ 如果（响应.ok）{ 返回响应.json().then((json) => { 返回 json.data[id].quote.USD; }); 别的 { throw new Error('获取硬币数据失败'); } }) .catch((错误) => { 控制台日志（错误）； 返回空值； }); });

尝试{ const coinsData = await Promise.all(coinPromises); setCoins(coinsData.filter((coin) => coin !== null)); 抓住（错误）{ 控制台日志（错误）； } };

获取硬币（）； [apiKey, coinIds]);

常量数据 = { 标签：coins.map((coin) => coin.name), 数据集：[ { 标签：'市值'， 数据：coins.map((coin) => coin.market_cap), 背景颜色： [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)', ], 边框颜色： [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)', ], 边框宽度：1， }, ], };

常量选项 = { 维护纵横比：假， 尺度：{}， 传奇： { 标签： { 字体大小：25， }, }, };

返回（ ); };'

导出默认条形图；`

这是我的 barchart.js 文件的代码，但是图表正在显示，但是数据没有显示，我有一个无限循环的错误，这些错误只会在检查时增加。我尝试使用另一个 api 但同样的问题