React使用Recharts绘制折线图无数据显示问题求助

问题根源 #

• dataKey配置错误：你给Line组件传了graphData.x、给XAxis传了graphData.y，但graphData是数组，每个数据项的键是x和y，应该传入对应的字符串键名。
• useEffect无限循环：未设置依赖数组，导致组件每次渲染都调用createMockData，state反复更新干扰图表渲染。

修正后的代码 #

数据生成部分

const [graphData, setGraphData] = useState([]);

const createMockData = () => {
  let data = [];
  let value = 50;
  const baseDate = new Date();
  baseDate.setHours(0, 0, 0, 0);
  // 基于当前日期往前推，避免日期溢出
  baseDate.setDate(baseDate.getDate() - 5);
  
  for (let i = 0; i <= 5; i++) {
    let date = new Date(baseDate);
    date.setDate(baseDate.getDate() + i);
    value += Math.round((Math.random() < 0.5 ? 1 : 0) * Math.random() * 10);
    data.push({ x: date, y: value });
  }
  setGraphData(data);
};

useEffect(() => {
  createMockData();
}, []); // 空依赖数组，仅组件挂载时执行一次

折线图渲染部分

<LineChart width={500} height={200} data={graphData}>
  <Line type="monotone" dataKey="y" stroke="var(--mainColor)" />
  <XAxis dataKey="x" tickFormatter={(date) => new Date(date).toLocaleDateString()} />
  <Tooltip formatter={(value) => [value, '数值']} />
</LineChart>

额外优化说明 #

• XAxis添加tickFormatter，将日期对象格式化为可读字符串；
• 调整日期生成逻辑，避免当月天数不足时的日期溢出问题；
• 空依赖数组确保数据仅生成一次，若需定时更新可添加对应依赖项。

内容的提问来源于stack exchange，提问作者João Silva