Edit page onUpdate 질문

onUpadate를 주석처리하면 home으로 잘 돌아오는데, onUpadate를 실행하면 위 사진 같은 상태가 됩니다.

매번 오탈자로 질문드려서 죄송하지만 코드를 계속 살펴보고 다시 작성해봐도 같아서 질문드립니다...

import Header from "../components/Header";
import Button from "../components/Button";
import Editor from "../components/Editor";
import { useParams, useNavigate } from "react-router-dom";
import { useContext } from "react";
import { DiaryDispatchContext } from "../App";
import useDiary from "../hooks/useDiary";

const Edit = () => {
  const params = useParams();
  const nav = useNavigate();
  const { onDelete, onUpdate } = useContext(DiaryDispatchContext);
  const curDiaryItem = useDiary(params.id);

  const onClickDelete = () => {
    if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) {
      //일기 삭제 로직
      //console.log(params.id);
      onDelete(params.id);
      nav("/", { replace: true });
    }
  };

  const onSubmit = (input) => {
    if (window.confirm("일기를 정말 수정할까요?")) {
      onUpdate(
        params.id,
        input.createdDate.getTime(),
        input.emotionId,
        input.content
      );
    }
    nav("/", { replace: true });
  };

  return (
    <div>
      <Header
        title={"일기 수정하기"}
        leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />}
        rightChild={
          <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} />
        }
      />
      <Editor initData={curDiaryItem} onSubmit={onSubmit} />
    </div>
  );
};

export default Edit;

답변 2

0

이정환 Winterlood

2024-11-08T03:33:57.109Z

App 컴포넌트의 reducer 함수의 UPDATE 부분에 오타가 있습니다. 아래 첨부해드린 map 메서드를 자세히 살펴보시면 화살표 함수의 화살표 뒤가 중괄호로 묶여 아무런 값도 리턴하지 않고 있는걸 볼 수 있습니다.

 

0

ju004100

2024-11-10T01:58:21.664Z

네 감사합니다

다름이 아니라 해당 부분을 수정했음에도 수정이 안되는 것 같습니다. 페이지 랜더링은 잘 되지만 아래 이미지의 오류가 발생하여 질문하게 되었습니다.

 

0

이정환 Winterlood

2024-11-10T03:19:32.951Z

안녕하세요 ju004100님!

이번 오류 해결은 제가 정답을 바로 알려드릴수도 있지만(매우 쉬운 정답이에요) 그것보단 ju004100님이 직접 해보실 수 있도록 안내해드리는게 더 괜찮을 것 같아요 실제로 우리가 개발을 진행하다보면 매일 새로운 에러에 부딪히게 되거든요 그럴 때 가장 도움이 되는건 에러메세지를 직접 해석하고 원인을 찾아 문제를 해결하는 능력이에요

캡쳐해서 올려주신 에러메세지를 한번 자세히 읽어보시면 어떨까요? 복사해서 파파고에 붙여넣어 번역한 상태로 보셔도 좋아요! 아마 장담컨데 5분내로 정답을 찾으실 수 있을거에요 그리고 찾으신 정답은 생각보다 너무 간단한거라 당황하실수도 있습니다 ㅋㅋ 그럼에도 혹시 정답을 못 찾으실 수 있으니 아주 아래에 정답도 함께 남겨드릴게요

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

열심히 찾아보셨는데도 정답을 모르시겠다면 아래를 참고해주세요

정답은 에러 메세지의 첫 문장에 나와 있어요 바로 에러 메세지를 보시면 <seciotn> 이라는 태그는 없다! 문구가 나와 있는데 seciotn이 아니라 section으로 작성해주셔야 해요 이번에도 역시 원인은 오타였네요

 

1

ju004100

2024-11-10T06:02:17.756Z

reducer에서도

String(item.id) === String(action.data.id)로 작성해야하는데

String(item.id) === String(action.id)로만 해뒀더라구요 (이러면 비교 자체가 안되는거였는데...말이죠...)

두 가지의 오타가 있었는지 몰랐는데 생각보다 너무 간단한 실수였습니다...ㅎㅠㅎ

 

 

0

이정환 Winterlood

2024-11-06T12:00:03.031Z

안녕하세요 이정환입니다.

문제를 정확히 식별하려면 전체 프로젝트 코드를 확인해봐야 할 것 같아요

이에 프로젝트 전체 코드를 GitHub에 업로드 하신 다음 링크로 공유해주시면 감사하겠습니다 😃

0

ju004100

2024-11-07T05:59:05.445Z

https://github.com/1000ju/emotion_diary.git

깃허브 주소 입니다