如何实现Flask后端处理结果在React前端展示？

没问题！我来帮你搞定这个事儿，分两步走：先调整下你的Flask后端代码，让它返回实际处理后的结果，再写React前端的请求和展示逻辑。

第一步：调整Flask后端代码 #

你当前的后端只返回了测试消息hi hello，得把实际处理好的data结果传回去，修改result函数的返回部分就行：

from flask import Flask, request, jsonify, send_from_directory
from flask_cors import CORS
import sys
import escode

app = Flask(__name__)
CORS(app)

@app.route('/result', methods = ['GET','POST'])
def result():
    SearchData = request.get_json()
    results = escode.retrieve_results( SearchData['MaskList'][0]['SpecChar'] )
    data = [doc for doc in results['hits']['hits']]
    for doc in data:
        print("(%s) %s"% (doc['_id'], doc['_source']['Name']), file=sys.stderr)
    # 这里改成返回处理后的结果
    return jsonify({ 
        'msg': '请求成功',
        'results': data  # 把你的搜索结果数据传回去
    }), 200

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

第二步：React前端发送请求并展示结果 #

这里给你两种常用的实现方式，选一种你习惯的就行：

方式一：用原生fetch API #

在React组件里发送POST请求，拿到结果后用状态管理来渲染展示：

import { useState } from 'react';

function SearchResultComponent() {
  // 用状态存储后端返回的结果
  const [searchResults, setSearchResults] = useState([]);
  // 模拟你要发送的MaskList数据（实际项目里可以从输入框等地方获取）
  const targetMaskList = [{ SpecChar: '要搜索的字符' }];

  // 定义发送请求的函数
  const fetchResults = async () => {
    try {
      const response = await fetch('http://localhost:5000/result', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        // 把数据转成JSON字符串发送
        body: JSON.stringify({ MaskList: targetMaskList }),
      });

      if (!response.ok) {
        throw new Error('请求失败，请稍后重试');
      }

      const responseData = await response.json();
      // 更新状态，触发组件重新渲染展示结果
      setSearchResults(responseData.results);
    } catch (error) {
      console.error('发送请求时出错:', error);
      alert('获取结果失败，请检查后端是否正常运行');
    }
  };

  return (
    <div className="search-container">
      <button onClick={fetchResults} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        发送请求获取结果
      </button>

      <div className="results-section">
        <h3>处理结果</h3>
        {searchResults.length === 0 ? (
          <p>暂无结果，点击上方按钮获取</p>
        ) : (
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {searchResults.map((doc, index) => (
              <li 
                key={index} 
                style={{ margin: '10px 0', padding: '12px', border: '1px solid #eee', borderRadius: '4px' }}
              >
                <strong>文档ID:</strong> {doc._id} <br />
                <strong>名称:</strong> {doc._source.Name}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default SearchResultComponent;

方式二：用axios库（更简洁） #

先安装axios：

npm install axios

然后在组件里使用：

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

function SearchResultComponent() {
  const [searchResults, setSearchResults] = useState([]);
  const targetMaskList = [{ SpecChar: '要搜索的字符' }];

  const fetchResults = async () => {
    try {
      const response = await axios.post('http://localhost:5000/result', {
        MaskList: targetMaskList
      });
      // 直接从response.data里拿结果更新状态
      setSearchResults(response.data.results);
    } catch (error) {
      console.error('请求出错:', error);
      alert('获取结果失败');
    }
  };

  return (
    <div>
      <button onClick={fetchResults}>获取搜索结果</button>
      <div style={{ marginTop: '20px' }}>
        {searchResults.length > 0 ? (
          searchResults.map((doc, idx) => (
            <div key={idx} style={{ padding: '10px', borderBottom: '1px dashed #ccc' }}>
              <p>ID: {doc._id}</p>
              <p>名称: {doc._source.Name}</p>
            </div>
          ))
        ) : (
          <p>还没有结果哦</p>
        )}
      </div>
    </div>
  );
}

export default SearchResultComponent;

注意事项 #

• 确保你的Flask后端在http://localhost:5000运行（如果改了端口，前端的URL也要对应修改）
• 后端已经配置了CORS(app)，所以跨域问题不用额外担心
• 实际项目中，targetMaskList的数据可以从用户输入表单、搜索框等地方动态获取，不用写死

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