如何将Flask中的对象列表转为JSON发送至React前端

我曾查阅过类似问题的解决方案，但均未奏效。以下是我的查询代码：

results = (
   db.session(TestInfo.test, TestInfo.test_regime_name, StandardResult.cell_id)
   .select_from(TestInfo)
   .join(StandardResult, TestInfo.test==StandardResult.test)
   .distinct(StandardResult.cell_id)
   .all()
)

由于数据来自设备，两张表无预设关联关系，我只能手动关联。这个查询返回的是不含列名的元组列表，于是我用以下代码处理成带键的字典列表：

response = [row._mapping for row in results]

处理后得到的格式如下：

[{'test': '2514', 'test_regime_name': '4695 XX XXX', 'cell_id': '000123456'}, {...}, {...}, ...]

现在我卡在了如何把这个字典列表转为JSON并发送给React前端这一步。

解决办法 #

后端处理（以Flask为例）

如果你的后端用的是Flask，直接用内置的jsonify方法就能把字典列表转为符合标准的JSON响应：

from flask import jsonify

# 假设这是你的API路由
@app.route('/api/test-data')
def get_test_data():
    # 执行查询和处理逻辑
    results = (
       db.session(TestInfo.test, TestInfo.test_regime_name, StandardResult.cell_id)
       .select_from(TestInfo)
       .join(StandardResult, TestInfo.test==StandardResult.test)
       .distinct(StandardResult.cell_id)
       .all()
    )
    response = [row._mapping for row in results]
    return jsonify(response)

如果是普通Python环境（非Flask），可以用json模块手动序列化，同时设置正确的响应头：

import json
from http.server import BaseHTTPRequestHandler

class MyHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        # 执行查询和处理逻辑
        results = (
           db.session(TestInfo.test, TestInfo.test_regime_name, StandardResult.cell_id)
           .select_from(TestInfo)
           .join(StandardResult, TestInfo.test==StandardResult.test)
           .distinct(StandardResult.cell_id)
           .all()
        )
        response = [row._mapping for row in results]
        json_data = json.dumps(response)
        self.send_response(200)
        self.send_header('Content-Type', 'application/json')
        self.end_headers()
        self.wfile.write(json_data.encode('utf-8'))

前端React接收数据

React端可以用fetch或者axios来请求并处理数据：

用fetch的示例：

import { useEffect, useState } from 'react';

function TestDataComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('/api/test-data')
            .then(res => res.json())
            .then(data => setData(data))
            .catch(err => console.log('请求出错:', err));
    }, []);

    return (
        <div>
            {data.map(item => (
                <div key={item.cell_id}>
                    <p>测试编号: {item.test}</p>
                    <p>测试方案: {item.test_regime_name}</p>
                    <p>单元ID: {item.cell_id}</p>
                </div>
            ))}
        </div>
    );
}

export default TestDataComponent;

用axios的示例：
先安装axios：npm install axios，再编写组件：

import { useEffect, useState } from 'react';
import axios from 'axios';

function TestDataComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        axios.get('/api/test-data')
            .then(res => setData(res.data))
            .catch(err => console.log('请求出错:', err));
    }, []);

    return (
        <div>
            {data.map(item => (
                <div key={item.cell_id}>
                    <p>测试编号: {item.test}</p>
                    <p>测试方案: {item.test_regime_name}</p>
                    <p>单元ID: {item.cell_id}</p>
                </div>
            ))}
        </div>
    );
}

export default TestDataComponent;

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