Cannot read properties of undefined (reading 'NaN')TypeError: Cannot read properties of undefined (reading 'NaN')

🔎  들어가면서...

상품목록 페이지에서 한가지의 상품을 클릭했을 때 오류가 발생했다.
더미데이터를 만들어, 상품목록페이지에서 map함수로 뿌려주고,
해당 상품을 클릭했을 때 상세페이지로 이동하면서 url에 해당 상품에 대한 정보를 가지고가도록 했는데,

url에는 잘 가져갔지만, 정작 상세페이지에서는 오류와 함께 출력되지 않았다.

 

 

 

상세페이지(detail)에서 

const { brandIndex, ItemIndex } = useParams();

 

 

 

더미 데이터는 2차원 배열의 형태로,

nike = [{가격,이름,타입},{가격2,이름2,타입2}] 
asics = [{가격,이름,타입},{가격2,이름2,타입2}] 
ader = [{가격,이름,타입},{가격2,이름2,타입2}] 

productDummy = [[nike],[asics],[ader]] 

 

useParams를 통해,  url을 통해 넘겨받은 파라미터값을 brandIndex와 itemIndex로 받아오고있다.

 

brandIndex = 브랜드의 인덱스값 nike,asics,ader

itemIndex = 브랜드의 각 아이템들의 인덱스 값들을 나타낸다.

 

detail.js

import React from "react";
import { useParams } from "react-router-dom";
import productDummy from "../dummyData/product";
import "../style/detail.css";

function Detail() {
  const { brandIndex, ItemIndex } = useParams();
  console.log(brandIndex, ItemIndex);
  const selectedArray = productDummy[parseInt(brandIndex)];
  const selectedItem = selectedArray[parseInt(ItemIndex)];
  if (!selectedItem) {
    return <div className="error_div">상품을 찾을 수 없습니다</div>;
  }
  return (
    <div className="detail">
      <h1>{selectedItem.brand}</h1>
      <p>종류: {selectedItem.type}</p>
      <p>{selectedItem.name}</p>
      <p>가격: {selectedItem.price}</p>
    </div>
  );
}

export default Detail;

 

하지만, 오류가 발생했다...

 

이유는 간단한것에 있었다.

 

현재 useParams의 변수 이름과

 

route설정에서 url 파라미터 변수명이 같아야되는데, 달라서 값을 받아오지 못해 undefined 문제가 발생했던 것이었다.

 

App.js

import { Route, Routes } from "react-router-dom";
import Main from "./pages/main";
import Detail from "./pages/detail";
import List from "./pages/list";
import Basket from "./pages/basket";
import Mypage from "./pages/mypage";
import Brand from "./pages/brand";
import Event from "./pages/event";
import Rank from "./pages/rank";
import "./App.css";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Main />}></Route>
        <Route
          path="detail/:brandIndex/:ItemIndex"
          element={<Detail />}
        ></Route>
        <Route path="list" element={<List />}></Route>
        <Route path="basket" element={<Basket />}></Route>
        <Route path="mypage" element={<Mypage />}></Route>
        <Route path="brand" element={<Brand />}></Route>
        <Route path="event" element={<Event />}></Route>
        <Route path="rank" element={<Rank />}></Route>
      </Routes>
    </div>
  );
}

export default App;

 

 

🔎  마치면서 ...

별거 아닌데, 생각보다 시간을 많이 잡아먹었다.
구글링과 gpt검색도, 어느정도 알고있어야 빠르게 정답을 찾을 수 있다는 것을
한번 더 깨닫게되었다.