使用React与Flask搭建网站时数据无法加载的原因排查

尝试通过React的useEffect钩子从Flask后端获取数据并展示，参考示例代码后仅能获取对象引用，无法在控制台及页面显示数据。以下是相关代码：

App.js #

import React, { useState, useEffect } from 'react'

function App() {
  const [data, setData] = useState([{}])

  useEffect(() => {
    fetch("/members").then(
      res => res.json()
    ).then(
      data => {
        setData(data)
        console.log(data)
      }
    )
  }, [])
  
  return (
    <div className="App">
      {(typeof data.members === 'undefined') ? (
        <p> Loading... </p>
      ):( 
        data.members.map((member, i) => (
          <p key={i}>{member}</p>
        ))
      )}
    </div>
  );
}

export default App;

server.py #

from flask import Flask

app = Flask(__name__)

# Members API Route
@app.route('/members')
def members():
    return {"members": ["Mem1", "Mem2", "Mem3"]}

if __name__ == "__main__":
    app.run(debug=True)

问题原因及解决方案 #

1. 初始State类型不匹配

你将data初始化为[{}]（数组类型），但Flask后端返回的是包含members数组的对象。类型不匹配会导致：

• 初始渲染时data.members必然为undefined，显示Loading；
• 数据更新后，State类型从数组突变为对象，可能引发React渲染逻辑异常。

修正方案：将初始State改为空对象，匹配后端返回结构：

const [data, setData] = useState({})

2. 跨域请求被拦截

React开发服务器默认运行在3000端口，Flask默认在5000端口，属于不同域名，浏览器会拦截跨域请求，导致数据无法正确接收（即便你以为获取到了对象引用，实际可能是错误信息或空对象）。

解决方式二选一：

• 方式一：React配置代理
  在React项目的package.json中添加代理配置，自动转发请求到Flask服务器：

"proxy": "http://localhost:5000"

• 方式二：Flask开启跨域支持
  安装flask-cors依赖：

pip install flask-cors

修改server.py添加跨域支持：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求

@app.route('/members')
def members():
    return {"members": ["Mem1", "Mem2", "Mem3"]}

if __name__ == "__main__":
    app.run(debug=True)

3. 优化渲染判断逻辑

可以简化判断逻辑，更严谨地检测数据是否加载完成：

return (
  <div className="App">
    {!data.members ? (
      <p>Loading...</p>
    ) : (
      data.members.map((member, i) => (
        <p key={i}>{member}</p>
      ))
    )}
  </div>
);

为什么视频中可以正常运行？ #

视频示例大概率提前配置了跨域支持（代理或Flask跨域插件），且初始State的类型设置正确，匹配后端返回的数据结构，因此没有触发上述问题。

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