[ TIL ] 상세페이지로 데이터를 불러오는 방법

import React from 'react';
import styled from "styled-components";
import Layout from '../components/Layout';
import { useNavigate } from "react-router-dom";
import { useParams } from 'react-router-dom';
import { useSelector } from "react-redux";




const More = () => {
  const todos = useSelector((state) => state.todos.todos);

  let navigate = useNavigate();
  const param = useParams();

  console.log(param)


  const param_id = todos[param.id];

  return (
    <Layout>
      <MoreBox>
        <MoreId>id:{param_id.id}</MoreId>
        <MoreTitle>{param_id.title}</MoreTitle>
        <hr></hr>
        <MoreBody>{param_id.body}</MoreBody>
        {/* <div>{todoById((param.id) - 1)}</div> */}
        <MoreButton
          onClick={() => {
            navigate(-1);
          }}
        >이전으로</MoreButton>
      </MoreBox>
    </Layout>

  );
};


export default More;

todolist에서 상세보기 페이지 파일인데

const param_id = todos[param.id]; 

으로 param_id.title 이런식으로 꺼내왔고 잘되는줄 알았는데

테스트 결과 추가만 할때는 괜찮은데

중간의 todo를 삭제하게 되면 todo배열의 순서와 todo.id의 숫자가 틀려지면서 

 

내가 id 5을 보고싶을때

todo 5번째 배열꺼 줘 라고 요청하게 되고 

중간에 삭제된 todo들로 인해 id 5번은 배열 5번째에 없게 되면서 에러가 발생한다.

 

 

> param.id === todo.id 일때만 해당 title을 return 해주는 방식 / useSelector를 사용해서 받는다

const More = () => {
  const todos = useSelector((state) => state.todos.todos);

  // const dispatch = useDispatch();
  let navigate = useNavigate();
  const param = useParams();

  console.log(param.id)

  return (
    <Layout>
      <MoreBox>
        <MoreId>id:{param.id}</MoreId>
        <MoreTitle>
          {todos.map((todo) => {
            if (param.id === todo.id) {
              return todo.title
            } else {
              return null
            }
          })}
        </MoreTitle>

        <hr></hr>
        <MoreBody>
          {todos.map((todo) => {
            if (param.id === todo.id) {
              return todo.body
            } else {
              return null
            }
          })}
        </MoreBody>

        <MoreButton
          onClick={() => {
            navigate(-1);
          }}
        >이전으로</MoreButton>
      </MoreBox>
    </Layout>

  );
};

 

> param을 안쓰고 location을 쓰는방식

import React from 'react';
import styled from "styled-components";
import Layout from '../components/Layout';
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";

const More = () => {

  let navigate = useNavigate();
  let location = useLocation();
 
  const id = location.state.id;
  const title = location.state.title;
  const body = location.state.body;


  return (
    <Layout>
      <MoreBox>
        <MoreId>id:{id}</MoreId>
        <MoreTitle>
          {title}
        </MoreTitle>

        <hr></hr>
        <MoreBody>
          {body}
        </MoreBody>

        <MoreButton
          onClick={() => {
            navigate(-1);
          }}
        >이전으로</MoreButton>
      </MoreBox>
    </Layout>

  );
};

export default More;

  const onClickMore = () => {
    navigate(`/more/${todo.id}`, {
      state: {
        id: todo.id,
        title: todo.title,
        body: todo.body,
      }
    })

  


      <MoreBtn
        onClick={() => { onClickMore() }}>
        📑 상세보기
      </MoreBtn>

훨씬 깔끔해진다 

 

 

param을 쓰려면 actioncreate를 사용해서 param.id와 같은 todo를 가져와야할 것 같은데 

콘솔에러가 나면서 창이 안뜬다...

내가 추측하기로는 List.jsx에서 props로 Todo.jsx 로 내려줬는데 여기서 삭제되고 변경되고 하는 정보가 스토어로 못가고 More.jsx에서 스토어를 이용해 정보를 가져올때 에러가 발생하는거 아닐까싶다.

해결은 못했다ㅠㅠ