所以我给你我的错误信息:
获取失败 TypeError: Failed to fetch 在 getItems (http://localhost:3000/main.b060b3b85b623d5e4359.hot-update.js:47:25) 在 http://localhost:3000/main.b060b3b85b623d5e4359.hot-update.js:54:5 在 commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:50177:30) 在 commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:51670:17) 在 commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:51642:13) 在 commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:51632:11) 在 commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:51622:7) 在 flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:53507:7) 在 flushPassiveEffects (http://localhost:3000/static/js/bundle.js:53459:18) 在 commitRootImpl (http://localhost:3000/static/js/bundle.js:53418:9)
这是我在 vs 上的代码
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Box, Typography, Tab, Tabs, useMediaQuery } from "@mui/material";
import { setItems } from "../../state";
import Item from "../../components/item";
const ShoppingList = () => {
const dispatch = useDispatch();
const [value, setValue] = useState("all");
const items = useSelector((state) => state.cart.items);
const isNonMobile = useMediaQuery("(min-width:600px)");
console.log("items", items);
const handleChange = (event, newValue) => {
setValue(newValue);
};
async function getItems() {
const items = await fetch(
"https://localhost:1337/api/items?populate=image",
{ method: "GET" }
);
const itemsJson = await items.json();
dispatch(setItems(itemsJson.data));
}
useEffect(() => {
getItems();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const topRatedItems = items.filter(
(item) => item.attributes.category === "topRated"
);
const newArrivalsItems = items.filter(
(item) => item.attributes.category === "newArrivals"
);
const bestSellersItems = items.filter(
(item) => item.attributes.category === "bestSellers"
);
return (
<Box width="80%" margin="80px auto">
<Typography variant="h3" textAlign="center">
Our Featuted <b>Products</b>
</Typography>
<Tabs
textColor="primary"
indicatorColor="primary"
value={value}
onChange={handleChange}
centered
TabIndicatorProps={{ sx: { display: isNonMobile ? "block" : "none" } }}
sx={{
m: "25px",
"& .MuiTabs-flexContainer": {
flexWrap: "wrap",
},
}}
>
<Tab label="ALL" value="all" />
<Tab label="NEW ARRIVALS" value="newArrivals" />
<Tab label="BEST SELLERS" value="bestSellers" />
<Tab label="TOP RATED" value="topRated" />
</Tabs>
<Box
margin="0 auto"
display="grid"
gridTemplateColumns="repeat(auto-fill, 300px)"
justifyContent="space-around"
rowGap="20px"
columnGap="1.33%"
>
{value === "all" &&
items.map((item) => (
<Item item={item} key={`${item.name}-${item.id}`} />
))}
{value === "newArrivals" &&
newArrivalsItems.map((item) => (
<Item item={item} key={`${item.name}-${item.id}`} />
))}
{value === "bestSellers" &&
bestSellersItems.map((item) => (
<Item item={item} key={`${item.name}-${item.id}`} />
))}
{value === "topRated" &&
topRatedItems.map((item) => (
<Item item={item} key={`${item.name}-${item.id}`} />
))}
</Box>
</Box>
);
return <div>shopping list</div>;
};
export default ShoppingList;