如何在其他JS文件中调用组件函数，将Dashboard数据传入chart.js绘图

问题核心原因 #

你当前的代码存在两处核心问题：

1. speedDataGraph函数没有任何返回逻辑，也没有将传入的数据存储到可被外部访问的变量中，参数仅在函数执行时临时存在，执行结束后就会被销毁，外部无法拿到你传入的速度数据。
2. 如果导入函数后打印函数本身就得到undefined，大概率是导入导出的路径或语法有误。

解决方案 #

第一步：调整Dashboard文件的导出逻辑

修改你Dashboard组件对应文件的代码，增加可共享的存储变量或回调注册机制：

// Dashboard 组件文件代码
// 方案1：用共享变量存储数据（适合同步获取数据的场景）
export let speedGraphData = null;

// 方案2：用回调机制实现数据更新通知（适合异步获取数据的场景）
let chartUpdateHandler = null;
export const registerChartUpdate = (handler) => {
  chartUpdateHandler = handler;
}

const graphdata = (graph) => {  
  console.log("initial", graph);
  // 存储到共享变量
  speedGraphData = graph;
  // 如果注册了回调，触发回调更新图表
  if (chartUpdateHandler) {
    chartUpdateHandler(graph);
  }
}

第二步：在chart.js中导入使用

// 注意：此处路径需要替换为你项目中Dashboard文件的真实相对路径
import { speedGraphData, registerChartUpdate } from './Dashboard';

// 同步场景：直接读取已存储的数据
console.log('速度数据：', speedGraphData);
// 拿到数据后调用你的图表绘制方法即可
// drawChart(speedGraphData)

// 异步场景：注册回调，等数据更新后自动触发图表更新
registerChartUpdate((newSpeedData) => {
  console.log('最新速度数据：', newSpeedData);
  // 调用图表绘制/更新方法
  // drawChart(newSpeedData)
})

导入undefined问题排查 #

• 检查导入路径是否正确，相对路径不要写错目录层级，比如Dashboard在上级目录的components文件夹下，路径就要写../components/Dashboard
• 确认你要导入的变量/函数在Dashboard文件中已经加了export关键字导出
• 避免循环导入：不要出现Dashboard导入chart.js内容的同时，chart.js又导入Dashboard内容的情况

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