前端页面始终不显示数据库中的任何内容，并且获取数据时出错

Question

我正在尝试从数据库中获取数据并将它们呈现在 Web 应用程序的前端页面上。 当我单击不同的冰箱按钮时，它总是显示“此冰箱中未找到任何物品”。在我的页面上。 对于前端，我使用 JavaScript 和 React.js。后端由Python + Flask完成。 谁能帮我找出原因并改正吗？

前端页面1 前端页面2

SpecificFridge.js：

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

const SpecificFridge = () => {
    const { fridgeNumber } = useParams();
    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]);

    return (
        <div className="specific-fridge-page">
            <NavBar/>
            <div className='specific-fridge-content'>
                <h1>Fridge {fridgeNumber}</h1>
                <table>
                    <thead>
                        <tr>
                            <th>Item Name</th>
                            <th>Entry Date</th>
                            <th>Expiry Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {items.length === 0 ? (
                            <tr>
                                <td colSpan="3">No items found in this fridge.</td>
                            </tr>
                        ) : (
                            items.map((item, index) => (
                                <tr key={index}>
                                    <td>{item.itemName}</td>
                                    <td>{item.entryDate}</td>
                                    <td>{item.expiryDate}</td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default SpecificFridge;

Fridge.js：

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

const Fridges = () => {
    const [selectedFridge, setSelectedFridge] = useState(null);
    const handleFridgeClick = (fridgeNumber) => {
        setSelectedFridge(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>
                {selectedFridge !== null && <SpecificFridge fridgeNumber={selectedFridge} />}
            </div>
        </div>
    );
};

export default Fridges;

应用程序.py

from flask import Flask, jsonify, request
import sqlite3


app = Flask(__name__)


def get_db_connection():
    conn = sqlite3.connect('stock.db')
    conn.row_factory = sqlite3.Row
    return conn


@app.route('/api/fridge/<int:fridgeNumber>', methods=['GET'])
def get_fridge_items(fridgeNumber):
    conn = None
    try:
        conn = get_db_connection()
        items = conn.execute('SELECT itemName, entryDate, expiryDate FROM STOCK WHERE fridgeNumber = :fridgeNumber', {'fridgeNumber': fridgeNumber}).fetchall()
        items_list = [dict(item) for item in items]
        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()


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

冰箱编号可以在控制台打印出来。

Answer 1

我认为这是因为在 API 调用中，您将冰箱编号作为字符串传递，而服务器端类型是整数，因此您可以在控制台中记录冰箱编号的类型吗？ 并且只作为 props ({fridgeNumber}) 传递而不使用 useParams()