최근 본 상품 오류 질문드립니다.

[망고미]

안녕하세요 최근 본 상품 번호를 localStorage에 저장하여 최근 본 상품 클릭시 최근 본 상품의 이미지가 뜨도록 구현하였습니다.
localStorage 값이 있을 때는 잘 출력됩니다.


하지만 localStorage의 'watched'를 지울 경우 메인 페이지도 안뜨고 많은 오류가 뜹니다. 어떤 부분이 문제일까요?

import "./App.css";
import { Container, Nav, Navbar } from "react-bootstrap";
import data from "./pages/data.js";
import { useState, useEffect } from "react";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Detail from "./pages/Detail.js";
import axios from "axios";
import Cart from "./pages/Cart.js";
import NavDropdown from "react-bootstrap/NavDropdown";
let count = 1;
function App() {
  useEffect(() => {
    if (localStorage.getItem("watched") === null) {
      localStorage.setItem("watched", JSON.stringify([]));
    }
  }, []);
  //localStorage.setItem("findProduct")
  let [shoes, setShoes] = useState(data);
  //페이지 이동을 도와줌
  let navigate = useNavigate();
  let findProduct = JSON.parse(localStorage.getItem("watched"));

  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Shop</Navbar.Brand>
          <Nav className="me-auto">
            <>
              <Nav.Link
                onClick={() => {
                  navigate("/");
                }}
              >
                홈
              </Nav.Link>
              <Nav.Link
                onClick={() => {
                  navigate("/detail");
                }}
              >
                상세페이지
              </Nav.Link>
              <Nav.Link
                onClick={() => {
                  navigate("/cart");
                }}
              >
                Cart
              </Nav.Link>
            </>
            <NavDropdown
              className="find"
              title="최근 본 상품"
              id="nav-dropdown"
            >
              <div className="product-list">
                {findProduct.map((a, i) => (
                  <img
                    className="product"
                    src={
                      "https://codingapple1.github.io/shop/shoes" +
                      (a + 1) +
                      ".jpg"
                    }
                    width="80%"
                  />
                ))}
              </div>
            </NavDropdown>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route
          path="/"
          element={
            <>
              {" "}
              <div className="main-bg"></div>
              <div className="container">
                <div className="row">
                  {shoes.map(function (a, i) {
                    return <Product i={i}></Product>;
                  })}
                </div>
              </div>
              <button
                onClick={() => {
                  if (count < 3) {
                    axios
                      .get(
                        "https://codingapple1.github.io/shop/data" +
                          (count + 1) +
                          ".json"
                      )
                      .then((result) => {
                        let copy = [...shoes, ...result.data];
                        setShoes(copy);
                      })
                      .catch(() => {
                        console.log("실패함");
                      });
                    count++;
                  } else if (count == 3) {
                    alert("더 이상 상품이 없습니다");
                  }
                }}
              >
                더보기
              </button>
            </>
          }
        />
        <Route path="/detail/:id" element={<Detail shoes={shoes}></Detail>} />
        <Route path="/cart" element={<Cart></Cart>}></Route>
        {/*
        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버임</div>} />
          <Route path="location" element={<div>위치임</div>} />
        </Route>
        <Route path="/event" element={<Event />}>
          <Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>} />
          <Route path="two" element={<div>생일기념 쿠폰받기</div>} />
        </Route>*/}
        <Route path="*" element={<div>없는 페이지입니다.</div>} />
      </Routes>
    </div>
  );
  {
    /*
  function Event() {
    return (
      <div>
        <h4>오늘의 이벤트</h4>
        <Outlet></Outlet>
      </div>
    );
  }
  function About() {
    return (
      <div>
        <h4>회사정보임</h4>
        <Outlet></Outlet>
      </div>
    );
  }
*/
  }
  function Product(props) {
    return (
      <div className="col-md-4">
        <img
          onClick={() => {
            let 꺼낸거 = localStorage.getItem("watched");
            꺼낸거 = JSON.parse(꺼낸거);
            //만약에 같은 값이 있으면 push하지마라!
            if (꺼낸거[props.i] != props.i) {
              꺼낸거.push(props.i);
            }
            localStorage.setItem("watched", JSON.stringify(꺼낸거));
            navigate("/detail/" + props.i);
          }}
          src={
            "https://codingapple1.github.io/shop/shoes" + (props.i + 1) + ".jpg"
          }
          width="80%"
        />
        <h4>{shoes[props.i].title}</h4>
        <p>{shoes[props.i].price}</p>
      </div>
    );
  }
}

export default App;

[codingapple]

map왼쪽에 있는게 null이면 map하지말라고 if문같은거 넣으면 될듯요

[글쓴이]

글