Axios+Flask+React获取数据库数据问题：前后端代码适配排查

我是网页开发新手，遇到一个问题：当Flask后端采用特定格式返回数据时，React前端通过Axios的Get请求无法正确获取并使用数据。请帮我排查是后端代码错误还是前端代码错误。

我的React代码： #

useEffect(() => {
    const fetchRevenue = async () => {
      try{
        const response = await api.get('/revenue/');
        setDbdata(response.data);
      } catch(err) {
        console.log(`Error: ${err.message}`);
      }
    }
    fetchRevenue();
  },[])

有问题的后端代码： #

@app.route("/revenue/")
def revenue():
    results = { "revenue_data": 
    [
            {
                "id":1,
                "location":"Mordor",
                "highest_transaction":41,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":2,
                "location":"Orang Utan",
                "highest_transaction":43,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":3,
                "location":"Prchar",
                "highest_transaction":441,
                "lowest_transaction":10,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            }
        ]}
    
    return jsonify(command="Revenue",category="success",data=results,status=200)

能正常工作的后端代码： #

@app.route("/revenue/")
def revenue():
    revenue_data = [
            {
                "id":1,
                "location":"Mordor",
                "highest_transaction":41,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":2,
                "location":"Orang Utan",
                "highest_transaction":43,
                "lowest_transaction":6,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            },
            {
                "id":3,
                "location":"Prchar",
                "highest_transaction":441,
                "lowest_transaction":10,
                "revenue":981,
                "daily":[0,300,500,520,490,600,410],
                "weekly":[420,360,60,580,430,650,480],
                "Monthly":[420,380,760,980,430,350,470],
            }
        ]
    
    return jsonify(revenue_data)

问题原因与解决方法 #

这不是后端或前端的代码错误，而是前后端数据结构不匹配导致的：

• 正常工作的后端返回的是直接的数组数据，前端setDbdata(response.data)拿到的就是业务需要的数组，逻辑匹配。
• 有问题的后端返回的是多层嵌套对象：{command: "...", category: "...", data: {revenue_data: [...]}, status: 200}，但前端还是直接把整个response.data赋值给dbdata，数据结构和预期的数组完全不符，自然无法正常使用。

两种解决方式： #

1. 前端调整代码：修改数据获取逻辑，拿到嵌套里的真实业务数据：

const response = await api.get('/revenue/');
setDbdata(response.data.data.revenue_data);

2. 后端调整返回结构：如果要保留外层包装，确保前端能拿到正确的数组层级，或者直接沿用之前能正常工作的返回格式。

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