Recharts绑定API返回的二维数组异常，如何配置坐标轴与折线取值规则？

核心问题 #

你当前遇到的问题有三个：

1. Recharts的LineChart要求传入的data是对象数组格式，你直接传入接口返回的二维数组无法被组件识别
2. Line组件的dataKey属性需要传入字段名/取值函数，你直接传入marketcap[1]属于传值错误
3. 之前用map导致站点崩溃，本质是你没有缓存数据处理结果，数据处理逻辑直接写在渲染层会每次渲染都生成新数组，触发死循环重渲染

修复步骤 #

第一步：转换数据格式并缓存 #

优先用useMemo缓存处理后的数据，仅当原始接口数据变化时才重新计算，避免重复执行导致性能问题，这里你可以用你要求的for循环实现：

import { useMemo } from 'react'

// 假设rawMarketcap是你从接口拿到的原始二维数组数据
const formattedChartData = useMemo(() => {
  const result = []
  for (let i = 0; i < rawMarketcap.length; i++) {
    // 解构每个子数组的两个值
    const [xAxisValue, lineValue] = rawMarketcap[i]
    result.push({
      xAxisValue, // 对应X轴的时间戳取值
      lineValue // 对应折线的市值取值
    })
  }
  return result
}, [rawMarketcap])

第二步：修改折线图组件配置 #

传入格式化后的 data，同时配置正确的X轴和折线dataKey：

<LineChart
  margin={{ right: 70 }}
  width={420}
  height={170}
  data={formattedChartData}
>
  {/* 配置X轴，指定用xAxisValue字段作为取值 */}
  <XAxis dataKey="xAxisValue" />
  <Line
    dataKey="lineValue"
    type="monotone"
    stroke="#10b981"
    activeDot={{ r: 8 }}
  />
</LineChart>

额外优化建议 #

如果X轴需要展示格式化的日期而非时间戳，可以给XAxis添加tickFormatter属性自定义展示格式，示例：

<XAxis 
  dataKey="xAxisValue" 
  tickFormatter={(timestamp) => new Date(timestamp).toLocaleDateString()} 
/>

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