React+Node.js加密货币项目折线图无法显示求助

我正在开发一个加密货币项目，前端用React，后端用Node.js，需要展示比特币全年价格折线图。已经完成每日日期与价格数据的映射，但折线图始终无法显示数据。

数据状态说明 #

• 处理后的日期数据：已提取出格式正确的日期数组
• 处理后的价格数据：已提取出数值类型的价格数组
• 页面图表状态：仅显示空的折线图框架，无数据内容
• 首次渲染时details和details2打印结果为undefined

App.js代码 #

function App() {
  var [details, setDetails] = useState();
  var [details2,setDetails2] = useState();
  var o = [] // empty Object
  var price=0;
  var date="";
  var i=1;
var array="";
var years;
var prices1;

useEffect(()=>
  {
    Axios.get('http://localhost:3002/bitcoin').then((response,ans)=>
    {
      var array1 = response.data.split("space");
      array1.pop();

      array1.forEach(function(value)
      {
        console.log(value);
        date = value.split(":")[0];
        price = parseFloat(value.split(":")[1]);
        o.push({date,price});
        i++;
      });
      years = o.map(value => value.date);
      prices1 = o.map(value2=>value2.price);
      setDetails(years);
      setDetails2(prices1);
    })
  })
  console.log(details);
  console.log(details2);//trying to figure out in the site if the info is correct 
  
  const [userData, setUserData] = useState({
    labels: details,//supposed to show up the graph with the info , can only see the graph without no info
    datasets: [
      {
        label: "Price",
        data: details2,
        backgroundColor: [
          "rgba(75,192,192,1)",
        ],
        
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  });
  return (
    <div className="App">
      <h1>fedgfdsgs</h1>
      <div style={{ width: 1500 }}>
        <LineChart chartData={userData} />
      </div>
</div>
  );
}

export default App;

LineChart.js代码 #

import React from "react";
import { Line } from "react-chartjs-2";

function LineChart({ chartData }) {
  return <Line data={chartData} />;
}

export default LineChart;

问题排查与修复方案 #

1. 初始化状态缺失：details和details2初始值为undefined，导致userData的labels和data初始为undefined，图表无法渲染。需设置初始空数组：

   const [details, setDetails] = useState([]);
   const [details2, setDetails2] = useState([]);
   

2. userData未响应状态更新：userData用useState初始化后，不会自动同步details/details2的变化。两种解决方式：

   • 方式一：将userData改为计算属性，无需单独状态：

     const userData = {
       labels: details,
       datasets: [
         {
           label: "Price",
           data: details2,
           backgroundColor: ["rgba(75,192,192,1)"],
           borderColor: "black",
           borderWidth: 2,
         },
       ],
     };
     

   • 方式二：用useEffect监听状态变化，更新userData：

     useEffect(() => {
       setUserData({
         labels: details,
         datasets: [
           {
             label: "Price",
             data: details2,
             backgroundColor: ["rgba(75,192,192,1)"],
             borderColor: "black",
             borderWidth: 2,
           },
         ],
       });
     }, [details, details2]);
     

3. useEffect依赖数组缺失：当前useEffect无依赖数组，会导致组件每次渲染都重复发起请求。添加空依赖数组确保仅挂载时请求一次：

   useEffect(()=>{
     // 请求逻辑
   }, [])
   

4. 变量作用域优化：将o数组移到useEffect内部，避免组件重复渲染时的作用域问题：

   useEffect(()=>{
     const o = []; // 移到内部
     // 后续处理逻辑
   }, [])
   

修复后的完整App.js示例 #

import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import LineChart from './LineChart';

function App() {
  const [details, setDetails] = useState([]);
  const [details2, setDetails2] = useState([]);

  useEffect(() => {
    Axios.get('http://localhost:3002/bitcoin').then((response) => {
      const array1 = response.data.split("space");
      array1.pop();
      const o = [];
      array1.forEach((value) => {
        const date = value.split(":")[0];
        const price = parseFloat(value.split(":")[1]);
        o.push({ date, price });
      });
      const years = o.map(value => value.date);
      const prices1 = o.map(value2 => value2.price);
      setDetails(years);
      setDetails2(prices1);
    });
  }, []);

  const userData = {
    labels: details,
    datasets: [
      {
        label: "Price",
        data: details2,
        backgroundColor: ["rgba(75,192,192,1)"],
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  };

  return (
    <div className="App">
      <h1>Bitcoin Price Chart</h1>
      <div style={{ width: 1500 }}>
        <LineChart chartData={userData} />
      </div>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者ido284