React从接口获取JSON数据无法在Plotly中使用的问题排查

核心原因 #

map 是JavaScript数组专属方法，你调用它时，data 是对象类型而非数组，所以直接报错。

FastAPI返回的Pandas DataFrame默认转字典格式是键值对结构，每个键对应一组数据数组，比如：

{
  "Date": ["2024-01-01", "2024-01-02", "2024-01-03"],
  "Sales": [150, 230, 180]
}

而你可能预期的是对象数组结构（这种才能用map）：

[
  {"Date": "2024-01-01", "Sales": 150},
  {"Date": "2024-01-02", "Sales": 230},
  {"Date": "2024-01-03", "Sales": 180}
]

两种可行解决方式 #

1. 前端适配现有数据结构（无需改后端）

Plotly很多图表类型直接支持传入数组作为x/y轴数据，不需要把数据转成对象数组。比如：

import axios from 'axios';
import Plot from 'react-plotly.js';
import { useState, useEffect } from 'react';

function SalesChart() {
  const [plotData, setPlotData] = useState([]);

  useEffect(() => {
    axios.get('/rawdata')
      .then(res => {
        // 直接提取对象中的数组作为Plotly的数据
        setPlotData([{
          x: res.data.Date,
          y: res.data.Sales,
          type: 'line',
          name: '销售额'
        }]);
      });
  }, []);

  return <Plot data={plotData} layout={{ title: '销售趋势' }} />;
}

2. 后端修改返回格式（输出对象数组）

在FastAPI接口中，把DataFrame转字典时添加orient='records'参数，就能返回你预期的对象数组：

from fastapi import FastAPI
import pandas as pd

app = FastAPI()

@app.get("/rawdata")
def fetch_raw_data():
    # 示例DataFrame
    df = pd.DataFrame({
        "Date": ["2024-01-01", "2024-01-02", "2024-01-03"],
        "Sales": [150, 230, 180]
    })
    # 关键：用orient='records'转成对象数组
    return df.to_dict(orient='records')

这时前端拿到的就是数组，就能正常使用map处理数据（如果需要的话）。

快速验证方法 #

拿到数据后先打印类型，确认问题：

axios.get('/rawdata').then(res => {
  console.log(typeof res.data); // 输出"object"，说明不是数组
  console.log(Array.isArray(res.data)); // 输出false，进一步验证
});

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