page

import

import { useSelector, useDispatch } from "react-redux";

//Link path에서 보내는 값을 받기 위해
import { useParams } from "react-router-dom";

//페이지 전환 위해
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

//삭제 하는 비동기 함수
import deleteuserdata from "../../redux/thunks/boardDelteThunk";

Page(){}

// URL 파라미터에서 id 추출
  const { id } = useParams();

  //boardItemMap 상태 선택
  const userData = useSelector((state: any) => state.boardItemMap.boarditem);

  const navigate = useNavigate();

  //데이터를 각 key에 맞춰 넣기 위해 비구조화 할당 사용
  const userDataVar: any = userData[Number(id) as any][0];
  const { did, title, content, timedata } = userDataVar;

  const dispatch = useDispatch();

  //id의 타입이 string이어서 number로 타입 변경
  const boardId = Number(id);


const handleDelete = async () => {
    try {
      //목록 페이지로 이동
      navigate("/");

      //id값의 페이지의 데이터 삭제
      await dispatch(deleteuserdata({ boardId }) as any);
      //Cannot read properties of undefined (reading '0') 에러 만남
    } catch (error) {
      console.log(error);
      console.log("삭제가 안됩니다");
    }
  };

return

 return (
    <>
      {/* Page 컴포넌트의 내용을 id에 따라 동적으로 표시 */}
      <div className="container">
        <div className="page_box">
          <section>
            <p className="title">{userDataVar.title}</p>
            <div className="userInfo">
              <span>날아가는 개구리 변경 해야함 구현 안됨</span>
              <span>{userDataVar.timedata.toString()}</span>
            </div>
            <div className="page_txt">{userDataVar.content}</div>
          </section>
        </div>
        <div className="page_btn">
          <div>
            <Link to="/">목록</Link>
            <input type="submit" value="수정" />
            <input type="button" onClick={() => handleDelete()} value="삭제" />
          </div>
        </div>

       
      </div>
    </>
  );
};

export default Page;

학습

Cannot read properties of undefined (reading '0')

• 오류는 주로 배열이나 객체의 속성에 접근하려고 할 때 해당 배열 또는 객체가 정의되지 않았을 때 발생