localStorage로 만드는 최근 본 상품 기능 2

[이희재]

선생님 기능은 정상작동합니다

문제는 새로고침을 하면 

이 화면이 자꾸 나와요
/////////////////////// App.js ////////////////////////////
/////////////////////// function App ////////////////////////////
  useEffect(() => {
    if (!localStorage.getItem("watched")) {
      localStorage.setItem("watched", JSON.stringify([]));
    }
  }, []);

<Watch shoes={shoes} />
////////////////////// function App ////////////////////////////
////////////////////// function Watch////////////////////////////

function Watch(props) {
  let watched = JSON.parse(localStorage.getItem("watched"));

  return (
    <ul className="show">
      {watched.map((a) => (
        <li key={a}>
          <img
            className="img"
            src={`https://codingapple1.github.io/shop/shoes${a + 1}.jpg`}
          />
          <h4>{props.shoes[a].title}</h4>
        
      ))}
    
  );
}
////////////////////// function Watch////////////////////////////

/////////////////////// App.js ////////////////////////////

/////////////////////// Detail.js ////////////////////////////
  if (확인 === -1) {
      watched.push(찾은상품.id);
      localStorage.setItem("watched", JSON.stringify(watched));
    }
  }, []);
/////////////////////// Detail.js ////////////////////////////

제가 수정한 부분들 코드만 올렸습니다

한번 봐주세요!

[codingapple]

.title 왼쪽이 비어있다는 소리같은데 shoes라는거 props로 전송잘했나 확인합시다

[김보름]

저도 같은 문제가 있어서 검색 중 이었는데,
최근 본 상품에는 id가 4인거 분홍색 신발이 있는데,
상품 더보기를 해야 저게 로드가 되서 새로고침하면 shoes 에 없어서 그런거 같은데요
0,1,2만 들어있어서요
어떻게 해결할 수 있을까요?

[codingapple]

새로고침시 로컬스토리지에 없는 상품이 있으면 서버에서 가져오거나
로컬스토리지에 상품 정보들을 더 저장하거나 그러면 될듯요

[글쓴이]

글