如何将Flask REST API返回结果接入React应用并展示

1. Flask侧跨域配置（必做，否则React请求会被跨域拦截） #

先安装跨域依赖：
pip install flask-cors
在Flask启动文件中添加配置：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app) # 开发环境全局开启跨域，生产环境可限制允许访问的域名

@app.route('/predict', methods=['GET'])
def predict():
    solute = request.args.get('solute')
    solvent = request.args.get('solvent')
    # 此处保留你的推理逻辑
    return jsonify({
        "result": {
            "predictions": -3.4333341121673584
        }
    })

if __name__ == '__main__':
    app.run(port=3000, debug=True)

2. React侧Fetch版本实现（修正现有代码问题） #

你的原有代码存在以下问题：

• 请求地址错误，未指向正确的/predict接口，也没有传递查询参数
• useEffect未加空依赖数组，会无限重复执行请求
• 错误处理逻辑错误，未使用catch捕获异常
• 拿到接口返回值后没有存入state，无法在页面渲染使用

修正后的完整代码：

import { useState, useEffect } from "react";

function App() {
  // 单独声明状态变量，后续使用更灵活
  const [prediction, setPrediction] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 拼接请求参数，也可使用URLSearchParams做更规范的参数处理
    const solute = "CC(C)(C)Br";
    const solvent = "CC(C)(C)O";
    const requestUrl = `http://127.0.0.1:3000/predict?solute=${solute}&solvent=${solvent}`;

    fetch(requestUrl)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`请求错误，状态码：${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        // 提取预测结果存入状态
        setPrediction(data.result.predictions);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []); // 空依赖数组，仅在组件首次挂载时执行一次请求

  // 页面渲染逻辑
  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求失败：{error}</div>;

  return (
    <div className="App">
      <h1>推理预测结果</h1>
      <p>预测值：{prediction}</p>
    </div>
  );
}

export default App;

3. 可选：Axios版本实现（语法更简洁，内置异常处理） #

先安装Axios：
npm install axios
代码示例：

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

function App() {
  const [prediction, setPrediction] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPrediction = async () => {
      try {
        const response = await axios.get('http://127.0.0.1:3000/predict', {
          params: {
            solute: "CC(C)(C)Br",
            solvent: "CC(C)(C)O"
          }
        });
        setPrediction(response.data.result.predictions);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPrediction();
  }, []);

  // 渲染逻辑和Fetch版本完全一致
  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求失败：{error}</div>;

  return (
    <div className="App">
      <h1>推理预测结果</h1>
      <p>预测值：{prediction}</p>
    </div>
  );
}

export default App;

补充注意事项 #

• 开发阶段如果React和Flask服务端口不同，必须配置Flask跨域，或者在React项目中配置代理，避免跨域拦截
• 如果需要动态传递solute和solvent参数，可以把参数存入state，添加到useEffect的依赖数组中，参数变化时会自动重新发起请求

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