React JS动态数据柱状图制作求助：无法获取输入数据

核心问题定位 #

静态数据正常、动态数据失效，大多是状态未正确同步或图表未响应数据变化导致的，以下是具体解决步骤：

1. 正确用React状态管理输入数据 #

用useState存储输入数据，通过输入事件实时更新状态：

import { useState } from 'react';

function ChartDemo() {
  // 初始化状态，和你静态数据的格式保持一致
  const [dynamicData, setDynamicData] = useState([]);

  // 处理输入（示例为逗号分隔的数值输入）
  const handleInput = (e) => {
    // 把输入值转换成和静态数据一致的格式
    const formattedData = e.target.value.split(',')
      .map(val => Number(val.trim()))
      .filter(val => !isNaN(val)); // 过滤无效值
    setDynamicData(formattedData);
  };

  return (
    <>
      <input 
        type="text" 
        onChange={handleInput} 
        placeholder="输入逗号分隔数值，如10,20,30"
      />
      {/* 图表组件放在这里 */}
    </>
  );
}

如果是多维度输入（比如类别+数值），状态要改成数组对象格式：[{ label: '分类1', value: 20 }, ...]，确保和静态数据结构完全匹配。

2. 让图表组件响应数据变化 #

根据你使用的图表库，确保数据变化时触发图表重渲染：

用Recharts（声明式图表库）

直接把状态作为data props传入，Recharts会自动监听数据变化重渲染：

import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';

// 在ChartDemo组件内添加
<BarChart width={600} height={300} data={
  dynamicData.map((val, idx) => ({ name: `项${idx+1}`, value: val }))
}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>

用ECharts（命令式图表库）

需要通过useEffect监听数据变化，调用setOption更新图表：

import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function EChartBar({ data }) {
  const chartRef = useRef(null);
  let chart = null;

  useEffect(() => {
    // 初始化图表实例
    if (chartRef.current) {
      chart = echarts.init(chartRef.current);
    }
    return () => chart?.dispose(); // 清理实例
  }, []);

  useEffect(() => {
    // 数据变化时更新配置
    if (chart && data.length > 0) {
      chart.setOption({
        xAxis: { type: 'category', data: data.map((_, i) => `项${i+1}`) },
        yAxis: { type: 'value' },
        series: [{ type: 'bar', data }]
      });
    }
  }, [data]);

  return <div ref={chartRef} style={{ width: '600px', height: '300px' }} />;
}

// 在ChartDemo组件内使用
<EChartBar data={dynamicData} />

3. 排查常见错误 #

• 状态更新异步：不要在setDynamicData后直接读取dynamicData，如果需要处理数据，用事件回调中的临时变量（比如上面的formattedData）
• 数据格式不匹配：把动态数据转换成和静态数据完全一致的结构，比如静态数据是数组对象，动态数据也要转成相同格式
• 图表未监听数据：ECharts要把data加入useEffect依赖项，Recharts确保data是直接传入的props

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