리액트 state 관련 질문

Question

안녕하세요. todo리스트를 만들고 있는데, 해결하지 못하는 오류가 있어서 글 올립니다.우선 구현하고자 하는 기능은 다음과 같습니다.투두리스트 상세 페이지에 들어가면 useParams를 이용해 id값을 가져와서 전체 todo를 필터링한 후 일치하는 todo를 가져와서 todo, text, id를 보여준다.수정을 누르면 todo, text가 수정이 가능해진다.저장을 누르면 저장한다.문제는 다음과 같습니다.투두 상세 페이지를 처음 들어가면 문제 없이 내용들이 나오고 저장도 가능.새로고침을 하면 todo와 text가 사라짐나갔다가 다시 들어가면 잘 동작. 새로고침만 하면 문제.관련 코드입니다.// getTodoDetail로 필터링된 todo를 가져오기 export const useTodo = () => { const [searchQuery, setSearchQuery] = useState(""); const debounceSeachQuery = useDebounce({ value: searchQuery }); const { todos, getTodoError } = useGetTodoQuery(debounceSeachQuery); const getTodoDetail = (id: string) => { const todoId = parseInt(id); const selected = todos?.find((todo: TodoObj) => todo.id === todoId); if (!selected) return {}; const { id: selectedId, todo, content } = selected; console.log("getTodoDetail", selectedId); //새로고침 해도 문제 없이 출력 console.log("getTodoDetail", todo); //새로고침 해도 문제 없이 출력 console.log("getTodoDetail", content); //새로고침 해도 문제 없이 출력 return { selectedId, todo, content }; //새로고침 해도 문제 없이 출력 }; return { searchQuery, setSearchQuery, todos, getTodoError, getTodoDetail }; }; -------------------------------------- const TodoDetail = () => { const { id } = useParams(); console.log("TodoDetail", id); //새로고침하면 잘 가져오는 것 같음 const [isEdit, setisEdit] = useState(false); const [toast, setToast] = useState(false); const { getTodoDetail } = useTodo(); const { selectedId, todo, content } = getTodoDetail(id!); const [text, setText] = useState(content); const [todoTitle, setTodoTitle] = useState(todo); console.log("TodoDetail", text); //새로고침 하면 undefined로 출력 console.log("TodoDetail", todoTitle);//새로고침 하면 undefined로 출력 console.log("TodoDetail", content);//새로고침 하면 undefined로 출력 const navigate = useNavigate(); const { editTodoItem } = useTodoMutations(); const onClick = (e: React.MouseEvent) => { e.preventDefault(); const id = (e.target as HTMLElement).id; if (id === "cancel") { navigate("/todo"); } else if (id === "edit") { setisEdit(true); } else if (id === "save" && isEdit) { console.log(todoTitle); console.log(selectedId); console.log(text); editTodoItem({ editedTodo: todoTitle, id: selectedId, content: text }); setToast(true); setisEdit(false); } }; return (

onClick(e)}> {todoDetailHeader.map((item) => (

{item.text}

))}

ID: {selectedId}

{ setTodoTitle(e.target.value); console.log(e.target.value); }} readOnly={!isEdit} />

Teveloper · Answer

useParams에서 id 잘 가져오고 있나요 ?TodoDetail 페이지 라우팅 구조가 어떻게 될까요 ?

리액트 state 관련 질문

1개의 답변

Q&A 목록