React+TypeScript：JSON属性转多键值对象适配Recharts折线图

数据格式说明 #

原始API返回数据 #

{
  "_id": "2024",
  "一月": 120,
  "二月": 230,
  "三月": 180,
  "四月": 250
}

目标数据格式 #

[
  { "month": "一月", "count": 120 },
  { "month": "二月", "count": 230 },
  { "month": "三月", "count": 180 },
  { "month": "四月", "count": 250 }
]

报错原因解析 #

Uncaught Error: Objects are not valid as a React child... 通常是因为你在JSX中直接渲染了整个对象（比如原始API返回的单个对象），而非对象的具体属性值；或者数据转换过程出错，导致传给Recharts的不是预期的数组格式。

正确数据转换方法 #

方法1：使用Object.entries #

// 定义API返回数据的类型
interface ApiResponse {
  _id: string;
  [key: string]: string | number;
}

// 转换函数
const transformChartData = (rawData: ApiResponse) => {
  return Object.entries(rawData)
    .filter(([key]) => key !== '_id') // 过滤年份字段
    .map(([month, count]) => ({
      month,
      count: count as number // 类型断言确保count为数值类型
    }));
};

方法2：使用Object.keys #

const transformChartData = (rawData: ApiResponse) => {
  return Object.keys(rawData)
    .filter(key => key !== '_id')
    .map(month => ({
      month,
      count: rawData[month] as number
    }));
};

组件中正确使用转换后的数据 #

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

// 定义折线图所需的数据类型
interface ChartItem {
  month: string;
  count: number;
}

const MonthlyChart = ({ rawApiData }: { rawApiData: ApiResponse }) => {
  // 转换数据
  const chartData: ChartItem[] = transformChartData(rawApiData);

  // 注意：不要在JSX中直接渲染chartData或rawApiData对象
  return (
    <LineChart width={700} height={400} data={chartData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="count" stroke="#82ca9d" />
    </LineChart>
  );
};

排查要点 #

1. 禁止在JSX中直接渲染对象（比如{rawApiData}或{chartData}），只能渲染字符串、数值等React可识别的子元素。
2. 转换数据后通过console.log(chartData)确认结果是符合预期的数组。
3. 确保TypeScript类型定义准确，避免因类型不匹配导致的数据异常。

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