React使用Recharts绘制折线图时线条不显示，其余组件渲染正常

错误原因 #

• Line组件的关联字段属性名拼写错误：你代码中写的是小写的datakey，Recharts官方定义的属性名为驼峰格式dataKey，属性对大小写敏感，匹配不到对应字段就不会渲染折线。
• 你导入的YAxis、CartesianGrid属于未使用的冗余导入，不影响功能，可自行清理。

修复方法 #

将Line组件的对应属性修改为正确写法即可正常渲染：

<Line type="monotone" dataKey="amt" stroke="#82ca9d" activeDot={{ r: 8 }} strokeWidth={3}/>

如果修改后仍存在渲染异常，可以检查ResponsiveContainer的父节点是否设置了明确高度，避免容器尺寸计算异常导致的渲染问题。

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