如何将API获取的数据传入Victory Native Charts渲染图表

你当前的代码错误使用了Array.map的回调参数：map方法的第二个回调参数是遍历的索引值，不是你需要的indeks_massa字段，因此无法正确映射接口返回的字段值。

1. 前置校验 #

先确认接口拉取到的listHistory为标准数组结构，每个数组元素都包含usia（x轴对应字段）、indeks_massa（y轴对应字段）两个数值型字段，单条数据参考结构：

// listHistory单条元素示例
{
  usia: 24,
  indeks_massa: 21.5,
  // 其他接口返回字段...
}

2. 正确映射数据 #

遍历数组时从单个元素对象中读取对应字段，生成Victory组件要求的{x, y}结构数据：

const data = listHistory.map((item) => {
  return {
    x: item.usia, // x轴绑定usia字段
    y: item.indeks_massa // y轴绑定indeks_massa字段
  }
})
// 如果接口返回的字段是字符串格式，提前转数值避免渲染异常
// x: Number(item.usia), y: Number(item.indeks_massa)

3. 渲染图表 #

如果需要渲染面积图使用VictoryArea组件，仅需要折线则保留VictoryLine即可，建议搭配坐标轴组件完整展示：

{/* 等接口数据返回、data有值再渲染图表，避免初始空值报错 */}
{data.length > 0 && (
  <VictoryChart>
    {/* 面积图样式，fill为填充色，stroke为描边色 */}
    <VictoryArea
      style={{ 
        data: { 
          fill: "#90caf9", 
          stroke: "blue", 
          fillOpacity: 0.5 
        } 
      }}
      data={data}
    />
    <VictoryAxis label="Usia" />
    <VictoryAxis dependentAxis label="Indeks Massa" />
  </VictoryChart>
)}

• 接口请求为异步逻辑，组件初始渲染时listHistory默认为空，一定要加非空判断，等数据拉取完成后再渲染图表
• 如果字段返回值为字符串类型，必须先转成Number类型，否则会出现坐标轴刻度错乱、图表不渲染的问题

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