Cloudscape折线图组件无法渲染传入的对象数组数据问题求助

看起来你遇到的问题我之前帮朋友排查过类似的，核心问题出在你对子组件数据的传递和Cloudscape组件的要求匹配上，我来一步步帮你理清：

你当前代码的核心问题 #

在你的line-chart.jsx组件里，给series的data字段赋值时用了{chartData}，这相当于把传入的数组额外包装成了一个对象（结构变成了{ chartData: [你的数据数组] }），但Cloudscape的LineChart组件要求series.data必须是直接的数组类型，根本无法识别你包装后的对象结构，所以数据自然渲染不出来。

另外还有一个容易遗漏的点：Cloudscape的折线图需要明确指定x轴和y轴对应的数据字段，否则组件不知道该用数组里的哪个字段作为坐标轴数据。

修正步骤及代码示例 #

1. 修正子组件line-chart.jsx的代码

把data: {chartData}改成data: chartData，同时补充x轴和y轴的字段指定：

export default function LineChart({ chartData }) {
  return (
    <LineChart 
      series={[
        { 
          title: "Site 1", 
          type: "line", 
          data: chartData, // 去掉多余的花括号，直接传递数组
          xField: 'x', // 明确指定x轴对应数据对象的x字段
          yField: 'y'  // 明确指定y轴对应数据对象的y字段
          // 其他配置项可以保留
        }
      ]}
      // 可以补充一些基础配置，比如x轴的类型为日期
      xAxis={{
        type: 'date',
        title: { text: '日期' }
      }}
      yAxis={{
        title: { text: '数值' }
      }}
    />
  );
}

2. 父组件的调用代码保持不变

你当前传入dummy_data的写法是完全正确的，不需要修改：

const dummy_data = [
  { x: new Date('2025-05-16'), y: 58020 }, 
  { x: new Date('2025-05-17'), y: 102402 }, 
  { x: new Date('2025-05-18'), y: 104920 }
];

// 调用组件
<LineChart chartData={dummy_data} />

额外排查点（如果修正后还是不显示） #

• 确认你已经正确引入了Cloudscape的样式文件，缺失样式可能导致图表不渲染
• 检查父组件中是否有其他CSS样式覆盖了折线图的容器（比如容器宽度为0，导致看不到图表）
• 可以在子组件中用console.log(chartData)确认数据是否正确传递进来，排除数据传递链路的问题

内容来源于stack exchange