我试图使用chartjs构建一个LineChart,但我遇到了一些错误,我不能告诉的来源,数据是从服务器传输的,并(根据日期和coinValue)拆分刚刚好。任何想法是什么问题?
以下是错误:
下面是我代码:
import { Link } from "react-router-dom";
import { Line } from "react-chartjs-2";
import {Chart as chartjs, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement} from "chart.js";
chartjs.register(
Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)
function BitCoin() {
const [data, setData] = React.useState(null);
const [dates, setDates] = React.useState(null);
const [coinValue, setCoinValue] = React.useState(null);
const [chartData, setChartData] = useState(null);
React.useEffect(() => {
fetch("http://localhost:3001/bitcoin")
.then((res) => res.json())
.then((data) => {
const twoDimensionArr = data.message;
setData(twoDimensionArr);
setDates(twoDimensionArr.map(item => item[0]));
setCoinValue(twoDimensionArr.map(item => item[1]));
setChartData({
labels: twoDimensionArr.map(item => item[0]),
datasets: [{
label: "value of BTC in ILS",
data: twoDimensionArr.map(item => item[1]),
backgroundColor: 'gold'
}]
})
})
}, []);
return (
<div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
THIS IS THE BitCoin PAGE
<nav>
<Link to="/"> Home </Link>
</nav>
<nav>
<Link to="/coins"> Coins </Link>
</nav>
<Line
data = {chartData}
/>
</div>
)
}
export default BitCoin;
2条答案
按热度按时间ss2ws0br1#
这是因为您将
null
传递给Line组件。您需要使用空状态初始化数据,或者有条件地呈现Line。
初始状态:
有条件渲染:
sdnqo3pr2#
不熟悉该图表库,但我猜它在从API调用返回异步数据之前就出错了。我会尝试创建有效的未初始化数据以在初始呈现时提供给Line组件,或者只是在返回数据之前阻止图表加载。您可以使用以下内容检查是否存在此问题: