React 和 Chart.js 显示获取的数据

Question

我在理解如何使用 chart.js 获取要显示在图表上的数据时遇到问题

const [backendData, setBackendData] = useState([{}])

useEffect(() => {
    Axios.get('http://localhost:3001/get').then((response) =>{
    console.log(response)
    setBackendData(response.data)
    })
}, [])

backendData.map((val) => {
    const total = val.total
})

mondayData.datasets.data = total

// monday chart data
var mondayData = {
    labels: ["7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM"],
    datasets: [{
        data: [2, 1, 1, 6, 4, 7, 8, 14, 13],
        label: "Empty parking spaces",
        backgroundColor: "rgb(39, 63, 150, 0.5)",
    }]
}
// monday chart options
var mondayOptions = {

}



useEffect(() => {
    // var test = document.getElementById("0").getContext('2d');
    // test.destroy();
    // monday chart
    
    var mondayCtx = document.getElementById('mondayChart').getContext('2d');
    let mondayChartStatus = Chart.getChart("mondayChart");
    if (mondayChartStatus != undefined) {
        mondayChartStatus.destroy();
    }
    var mondayChart = new Chart(mondayCtx, {
        type: 'line',
        data: mondayData
    });

backendData 变量有一个值 {total: 22} 从数据库中提取 然后（我认为）习惯于设置 const total 变量

现在我要做的是让 22 显示为图表上的第一个值。

我正在使用 mondayData.datasets[0].data = total 来访问它，但出现错误“TypeError: Cannot read properties of undefined (reading 'datasets')”

我只是想使用我从数据库中获取的数据用作图表的数据

Answer 1

您正试图在初始化之前访问 mondayData，这就是您收到消息“类型错误：无法读取未定义的属性（读取“数据集”）”的原因。

在您的代码中，您试图将 total 的值分配给 mondayData.datasets.data，但此时 mondayData 尚未定义。您需要定义 mondayData 才能访问其属性。

以下是修改代码以使用图表中获取的数据的方法：

const [backendData, setBackendData] = useState([]);

// Fetch data from backend
useEffect(() => {
  Axios.get('http://localhost:3001/get').then((response) =>{
    console.log(response)
    setBackendData(response.data)
  })
}, [])

// Update chart data when backendData changes
useEffect(() => {
  if (backendData.length > 0) {
    const total = backendData[0].total;
    // monday chart data
    var mondayData = {
      labels: ["7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM"],
      datasets: [{
        data: [total, 1, 1,
...