Почему мой фронт React не отображает ничего? [дублировать] ⇐ Javascript

[Anonymous]

Я хотел создать страницу DisplayItems, которая принимает метод GET (в данном случае, фиктивная информация из «http: // localhost: 8000/itemtest» ) и возвращает таблицу с информацией с помощью радиопроизводительной кнопки, которая позволяет выбрать, в каком элементе вы хотите сделать ставку. Этот код использовался для правильной работы, но с момента добавления базы данных в мой фронт, код больше не работает.

Код: Выделить всё

import React, { useState, useEffect } from "react";
import { useLocation, Link } from "react-router-dom";
import axios from "axios";

const DisplayItems = () => {
const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedItemId, setSelectedItemId] = useState(null);

const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const searchQuery = searchParams.get("search") || "";

useEffect(() => {
axios
.get("http://localhost:8000/itemTest")
.then((response) => {
console.log("API Response:", response.data);
setItems(Array.isArray(response.data.item) ? response.data.item : []); // Ensure items is an array
setLoading(false);
})
.catch((err) => {
console.error("Error details:", err);
setError(err.response?.data?.message || "Error fetching items");
setLoading(false);
});
}, []);

useEffect(() => {
if (!searchQuery) {
setFilteredItems(items);
} else {
const filtered = items.filter((item) =>
item.name?.toLowerCase().includes(searchQuery.toLowerCase()) // Handle cases where name might be undefined
);
setFilteredItems(filtered);
}
}, [searchQuery, items]);

const handleRadioChange = (id) => {
setSelectedItemId(id);
};

if (loading) {
return 
Loading items...
;
}

if (error) {
return 
{error}
;
}

return (

Display Items

{items.length > 0 ? (



Select
Name
Description
Price



{filteredItems.map((item) => (


 handleRadioChange(item.id)}
/>

{item.name}
{item.itemdescription}
${item.price}

))}


) : (
No items found.
)}

{selectedItemId &&  (


Bid


)}

);
};

export default DisplayItems;

Я пытался использовать "http: // localhost: 8000/itemtest" чьи данные:

Код: Выделить всё

[{"id":"1","name":"bike","itemdescription":"This is a bicycle, used for transportation.","startingprice":"19.99","price":"19.99","highestbidderid":"","image_url":"http://example.com/sample-image.jpg"},{"id":"2","name":"paper","itemdescription":"a lovely piece of paper.","startingprice":"1.99","price":"1.99","highestbidderid":"","image_url":"http://example.com/sample-image.jpg"}]
< /code>
Я также проверил инициализацию данных: < /p>
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)

class ItemCreate(BaseModel):
itemdescription: str
name: str
price: float
shippingprice: float
endtime: datetime
startingprice: float
valid: bool
action_type: str
id: int

Я пытался отлаживать этот код в течение нескольких часов, но я не могу найти, почему он когда -то работал нормально, а теперь это не так.


Подробнее здесь: https://stackoverflow.com/questions/795 ... g-anything