React+Flask项目：控制台有API数据但页面表格无法显示的解决求助

我开发了一个机器学习模型，同时正在构建基于React前端与Flask后端的应用。后端API数据能传递到前端，控制台可以看到数据，但页面上的表格无法显示，没有报错。

React代码 #

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

function App() {
  const [tables, setTables] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/tables');
        console.log('API response:', response.data);
        setTables(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  // useEffect(() => {
  //   if (tables) {
  //     console.log('Tables state updated:', tables);
  //   }
  // }, [tables]);

  if (!tables) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Agricultural Data</h1>

      {tables.final_table && tables.final_table.length > 0 ? (
        <div>
          <h2>Table 1: Max and Min Production</h2>
          <table>
            <thead>
              <tr>
                <th>Year</th>
                <th>Crop With Max Production</th>
                <th>Crop With Min Production</th>
              </tr>
            </thead>
            <tbody>
              {tables.final_table.map((row, index) => (
                <tr key={index}>
                  <td>{row.Year}</td>
                  <td>{row.CropWithMaxProd}</td>
                  <td>{row.CropWithMinProd}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <p>No data available for Table 1</p>
      )}

      {tables.final_table2 && tables.final_table2.length > 0 ? (
        <div>
          <h2>Table 2: Average Yield and Cultivation Area</h2>
          <table>
            <thead>
              <tr>
                <th>Crop Name</th>
                <th>Average Yield (Kg/Ha)</th>
                <th>Average Cultivation Area (Ha)</th>
              </tr>
            </thead>
            <tbody>
              {tables.final_table2.map((row, index) => (
                <tr key={index}>
                  <td>{row['Crop Name']}</td>  {/* Use dot notation */}
                  <td>{row['Average Yield (Kg/Ha)']}</td>
                  <td>{row['Average Cultivation Area (Ha)']}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <p>No data available for Table 2</p>
      )}
    </div>
  );
}

export default App;

Flask代码 #

from flask import Flask, jsonify
from flask_cors import CORS
import pandas as pd

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})

@app.route('/api/tables')
def get_tables():
    # Load the data
    data = pd.read_csv("E:/MyApps/CropData/flask-server/Dataset/ManufacIndiaAgroDataset.csv")
    
    # Data cleaning and processing
    data['Crop Production (UOM:t(Tonnes))'] = data['Crop Production (UOM:t(Tonnes))'].fillna(0)
    data['Yield Of Crops (UOM:Kg/Ha(KilogramperHectare))'] = data['Yield Of Crops (UOM:Kg/Ha(KilogramperHectare))'].fillna(0)
    data['Area Under Cultivation (UOM:Ha(Hectares))'] = data['Area Under Cultivation (UOM:Ha(Hectares))'].fillna(0)
    
    # Group data by year and find max and min production crops
    year_group = data.groupby('Year')[['Crop Production (UOM:t(Tonnes))']].agg(['max', 'min']).reset_index()
    year_group.columns = ['Year', 'MaxProd', 'MinProd']
    
    # Merge with original data to get crop names
    merged_max = pd.merge(year_group, data, left_on=['Year', 'MaxProd'], right_on=['Year', 'Crop Production (UOM:t(Tonnes))'])
    merged_min = pd.merge(year_group, data, left_on=['Year', 'MinProd'], right_on=['Year', 'Crop Production (UOM:t(Tonnes))'])
    
    final_table = pd.DataFrame({
        'Year': merged_max['Year'],
        'CropWithMaxProd': merged_max['Crop Name'],
        'CropWithMinProd': merged_min['Crop Name']
    })
    
    # Calculating the average value and rounding off for 3 digits
    average_yield = data.groupby('Crop Name')['Yield Of Crops (UOM:Kg/Ha(KilogramperHectare))'].mean().round(3)
    average_cultivation_area = data.groupby('Crop Name')['Area Under Cultivation (UOM:Ha(Hectares))'].mean().round(3)
    
    final_table2 = pd.DataFrame({
        'Crop Name': average_yield.index,
        'Average Yield (Kg/Ha)': average_yield.values,
        'Average Cultivation Area (Ha)': average_cultivation_area.values
    })
    
    # Prepare the JSON response
    response = {
        "final_table": final_table.to_dict(orient="records"),
        "final_table2": final_table2.to_dict(orient="records")
    }

    # Debugging prints
    print("Final Table 1:", final_table)
    print("Final Table 2:", final_table2)
    print("Resulting data structure:", response)

    # Return the JSON response
    return jsonify(response)

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

输出截图 #

解决方案 #

1. 严谨判断数据类型 #

当前代码中tables.final_table && tables.final_table.length > 0的判断可能失效，修改为明确的数组类型判断，确保只有当数据是有效数组时才渲染表格：

// 替换Table1的判断逻辑
{Array.isArray(tables.final_table) && tables.final_table.length > 0 ? (
  // 原表格内容
) : (
  <p>No data available for Table 1</p>
)}

// 同理修改Table2的判断逻辑
{Array.isArray(tables.final_table2) && tables.final_table2.length > 0 ? (
  // 原表格内容
) : (
  <p>No data available for Table 2</p>
)}

2. 添加表格基础样式 #

浏览器默认的table没有边框，可能导致表格已渲染但肉眼无法识别。在App组件中添加内联样式：

return (
  <div>
    <style>
      {`
        table {
          border-collapse: collapse;
          width: 100%;
          margin: 2rem 0;
        }
        th, td {
          border: 1px solid #ddd;
          padding: 0.8rem;
          text-align: left;
        }
        th {
          background-color: #f5f5f5;
        }
      `}
    </style>
    {/* 原标题和表格代码 */}
  </div>
);

3. 验证字段名一致性 #

对照控制台输出的API数据，确认前端使用的字段名和后端返回的完全匹配：

• 检查final_table中的字段是否为Year、CropWithMaxProd、CropWithMinProd（注意大小写和下划线）
• 检查final_table2中的字段是否为Crop Name、Average Yield (Kg/Ha)、Average Cultivation Area (Ha)

4. 临时添加数据调试 #

在页面上打印完整的tables数据，直观确认数据结构是否符合预期：

// 在<h1>Agricultural Data</h1>下方添加
<pre style={{whiteSpace: 'pre-wrap'}}>{JSON.stringify(tables, null, 2)}</pre>

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