Flask API返回含\n的JSON字符串，React无法识别为数组求解

优先修复Flask端（根源解决） #

你的Flask接口存在两处错误，导致返回的数据格式异常：

1. 查询方法误用：find_one()仅返回单条文档，但你需要的是多条数据组成的数组，应该使用find()方法。
2. 数据转换错误：对find_one()的结果调用list()，实际是把文档的键名转成了列表，而非你需要的完整文档数组。

修正后的Flask代码：

from flask import jsonify  # 确保已导入jsonify

@app.route("/get_data", methods=["GET"])
def get_data():
    collection = mongo.db["colection_name"]  # 可选修正拼写：colection_name → collection_name
    # 获取所有文档并转为列表，排除默认的_id字段（可选）
    query_results = list(collection.find({}, {"_id": 0}))
    return jsonify(query_results)

说明：

• collection.find()返回游标，用list()转换为包含所有文档的数组
• {"_id": 0}用于去除MongoDB自动生成的_id字段，减少前端不必要的处理
• jsonify()会自动设置Content-Type: application/json响应头，确保前端能正确识别JSON类型

临时方案：React端处理字符串数据 #

如果暂时无法修改Flask接口，可以在React中手动解析字符串为JSON数组：

const getData = async () => {
  try {
    const res = await axios.get(`http://127.0.0.1:5000/get_data`);
    // 先判断数据类型，再解析
    const formattedData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
    setData(formattedData);
  } catch (error) {
    console.error('数据加载失败:', error);
  }
};

注意：这种方式属于临时 workaround，优先推荐修复Flask端，避免因字符串格式问题导致解析失败。

额外检查项 #

• 确认Flask已正确导入jsonify
• 若React和Flask端口不同，需在Flask配置CORS（比如安装flask-cors库并启用），避免跨域请求返回异常内容

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