React+Flask项目前端无法获取数据库数据问题排查求助

开发Web应用时，点击不同冰箱按钮，前端始终显示“No items found in this fridge.”。前端采用React+JavaScript开发，后端基于Flask+Python框架，控制台能正常打印fridgeNumber，但无法获取对应冰箱的物品数据。

核心问题排查 #

1. 前端参数传递方式不匹配
   Fridges.js中直接通过props传递fridgeNumber给SpecificFridge组件，但SpecificFridge依赖useParams()获取路由参数，两者逻辑不匹配，导致请求参数传递异常。
2. 数据库表/字段大小写不兼容
   Flask后端SQL查询使用大写STOCK表名和fridgeNumber字段名，SQLite在Linux/macOS环境下区分大小写，若数据库实际表名/字段名为小写，会导致查询无结果。
3. 数据库无对应测试数据
   stock.db中可能不存在对应fridgeNumber的物品条目，导致查询返回空数组。

修复方案 #

方案1：修正前端参数传递逻辑（二选一） #

方式A：改为props接收参数

修改SpecificFridge.js，移除路由参数依赖，直接接收props：

import React, { useState, useEffect } from 'react';
import NavBar from '../components/NavBar';
import './Style.css';

const SpecificFridge = ({ fridgeNumber }) => {
    console.log("fridgeNumber:", fridgeNumber); 
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch(`/api/fridge/${fridgeNumber}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => setItems(data))
            .catch(error => console.error('Error fetching fridge data:', error));
    }, [fridgeNumber]);

    // 其余返回代码保持不变
};

export default SpecificFridge;

方式B：改为路由跳转传递参数

修改Fridges.js，使用路由跳转替代直接渲染组件：

import React from 'react';
import { useNavigate } from 'react-router-dom';
import NavBar from '../components/NavBar';
import FridgeButton from '../components/FridgeButton';
import './Style.css';

const Fridges = () => {
    const navigate = useNavigate();
    const handleFridgeClick = (fridgeNumber) => {
        navigate(`/fridge/${fridgeNumber}`);
    };

    return (
        <div className="fridges-page">
            <NavBar />
            <div className="fridges-content">
                <h1>Total overview of all fridges</h1>
                <div className="fridges-container">
                    <FridgeButton fridgeNumber={1} onClick={() => handleFridgeClick(1)} />
                    <FridgeButton fridgeNumber={2} onClick={() => handleFridgeClick(2)} />
                    <FridgeButton fridgeNumber={3} onClick={() => handleFridgeClick(3)} />
                    <FridgeButton fridgeNumber={4} onClick={() => handleFridgeClick(4)} />
                </div>
            </div>
        </div>
    );
};

export default Fridges;

同时在路由配置文件（如App.js）中添加对应路由：

import { Routes, Route } from 'react-router-dom';
import Fridges from './pages/Fridges';
import SpecificFridge from './pages/SpecificFridge';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Fridges />} />
      <Route path="/fridge/:fridgeNumber" element={<SpecificFridge />} />
    </Routes>
  );
}

方案2：修正数据库查询逻辑 #

1. 检查stock.db的表名和字段名，确保与SQL语句一致：
   • 若表名为小写stock，将查询语句改为SELECT itemName, entryDate, expiryDate FROM stock WHERE fridgeNumber = :fridgeNumber
   • 若字段名为小写fridgenumber，将查询条件改为WHERE fridgenumber = :fridgeNumber
2. 使用SQLite工具（如SQLiteStudio）打开stock.db，确认对应fridgeNumber的物品条目存在。

方案3：添加调试日志定位问题 #

在Flask后端添加日志，确认参数和查询结果：

@app.route('/api/fridge/<int:fridgeNumber>', methods=['GET'])
def get_fridge_items(fridgeNumber):
    conn = None
    try:
        conn = get_db_connection()
        print(f"Received fridgeNumber: {fridgeNumber}")
        items = conn.execute('SELECT itemName, entryDate, expiryDate FROM STOCK WHERE fridgeNumber = :fridgeNumber', {'fridgeNumber': fridgeNumber}).fetchall()
        items_list = [dict(item) for item in items]
        print(f"Fetched items: {items_list}")
        return jsonify(items_list)
    except Exception as e:
        print(f"An error occurred: {e}")
        return jsonify({"error": "An error occurred while fetching data"}), 500
    finally:
        if conn:
            conn.close()

在前端fetch流程中添加日志：

.then(data => {
    console.log("Fetched data:", data);
    setItems(data);
})

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