chart.js随机的奇怪问题

Question

这对我来说毫无逻辑意义。

我的graph.js一直在工作，直到它作为道具通过本地存储后随机停止。我进行了重构，使传入的道具与本地存储完全无关。。。这仍然不重要。

出于某种原因，我在数据字段中输入的每个数字都有效，除非我输入props.score/number或任何重新分配该数字的数字。我从来没有见过这样的东西。当我控制台的日志号是82。它是一个数字(在控制台中是蓝色的(，但当我把它放在chart.js中时，它就不会出现了。

到底发生了什么事？！

这感觉就像在计算器中输入2+2，得到5。我真的不知道我已经想了大概4个小时了，但完全没有答案。再一次

这个错误今天随机发生，在此之前我的应用程序运行良好。。。？！

chart.js昨天有什么变化吗？这是一个随机错误吗？

回溯这么久，我从未遇到过这样的问题。毫无意义。

import {useEffect} from 'react'
import Chart from 'chart.js';
import './BreakDown.css'
const LineChart = (props) => {
const number=props.score ***i am trying to get props.score into the chart js data point. 
console.log(number) ****this console logs 82
const newNumber=10+number
console.log(newNumber) ***this console logs 92
useEffect(()=>{
var ctx = document.getElementById('myLineChart');
var myChart = new Chart(ctx, {
type: 'line',
responsive:true,
data: {
labels: ['X', 'IQ', 'X'],
datasets: [{
label: 'Your Score',
data: [0,newNumber,0], ***no matter what i do plug in in either of these numebnrs here doesn't work. 
backgroundColor: [
'rgba(54, 80, 235, 0.2)',
'rgba(54, 80, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1,
},
{
label: 'Average',
data: [0, 100, 0],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 80, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, .5)',
'rgba(255, 99, 132, .5)',
'rgba(255, 99, 132, .5)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
suggestedMin: 70,
suggestedMax: 160,
stepSize: 10
}
}]
}
}
});
},[])
return (
<div >
<canvas id="myLineChart" width="650" height="400"></canvas>
</div>
)
}
export default LineChart

更奇怪的是，如果我在图表中插入newNumber，在这种情况下它会给我10，尽管console.log newNumber会给我92…嗯？！

Answer 1

您的代码在我的第一次渲染中运行良好。我不能100%确定您的描述中出现了什么问题，但我看到的一个问题是，由于第二个参数中的[]，useEffect只运行一次。

如果您的prop.score更新，useEffect()将不会再次运行，这意味着您的图表将不会更新。

我在下面做的主要更改是在useEffect的数组中添加props.score，这告诉如果props.score发生更改，useEffect将再次运行。你可以在useEffect文档中阅读更多关于这方面的信息

import React, { useEffect } from 'react'
import Chart from 'chart.js';
const LineChart = (props) => {
const number = props.score //***i am trying to get props.score into the chart js data point. 
console.log(number) //****this console logs 82
const newNumber = 10 + number
console.log(newNumber) //***this console logs 92
useEffect(() => {
var ctx = document.getElementById('myLineChart');
var myChart = new Chart(ctx, {
type: 'line',
responsive: true,
data: {
labels: ['X', 'IQ', 'X'],
datasets: [{
label: 'Your Score',
data: [0, newNumber, 0],
backgroundColor: [
'rgba(54, 80, 235, 0.2)',
'rgba(54, 80, 235, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1,
},
{
label: 'Average',
data: [0, 100, 0],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 80, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, .5)',
'rgba(255, 99, 132, .5)',
'rgba(255, 99, 132, .5)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
suggestedMin: 70,
suggestedMax: 160,
stepSize: 10
}
}]
}
}
});
}, [props.score])
return (
<div >
<canvas id="myLineChart" width="650" height="400"></canvas>
</div>
)
}
export default LineChart