0

So ill give you my error message:

Failed to fetch TypeError: Failed to fetch at getItems (http://localhost:3000/main.b060b3b85b623d5e4359.hot-update.js:47:25) at http://localhost:3000/main.b060b3b85b623d5e4359.hot-update.js:54:5 at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:50177:30) at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:51670:17) at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:51642:13) at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:51632:11) at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:51622:7) at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:53507:7) at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:53459:18) at commitRootImpl (http://localhost:3000/static/js/bundle.js:53418:9)

and heres my code on 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;
sylo
  • 29
  • 3
  • Please edit your question and add your code and error messages as text using proper formatting instead of images – RubenSmn May 10 '23 at 05:37
  • Is your API endpoint working properly? Also is it under https? Anyways please check if API is working & use http if its in your local. try if that resolves your issue. – Jibin Bose May 10 '23 at 05:45
  • Also add try catch block to your fetch request so that you can handle fetch errors & dispatch your setItems function only if it is a success response. – Jibin Bose May 10 '23 at 05:46

1 Answers1

0

The error could be a network issue or a CORS (Cross-Origin Resource Sharing) issue.

If its a CORS issue you have to configure the server to allow requests from the domain and port that your React app is running.

Majid
  • 40
  • 6