댓글 수정 함수 바인딩이 안되는 것 같습니다.
import BoardCommentWriteUI from "./boardCommentWrite.presenter";
import { ChangeEvent, useState } from "react";
import { useMutation } from "@apollo/client";
import {
CREATE_BOARD_COMMENT,
UPDATE_BOARD_COMMENT,
} from "./boardCommentWrite.queries";
import { useRouter } from "next/router";
import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries";
import {
IMutation,
IMutationCreateBoardCommentArgs,
IMutationUpdateBoardCommentArgs,
} from "../../../../commons/types/generated/types";
import { IBoardCommentWriteProps } from "./boardCommentWrite.types";
export default function BoardComment(props: IBoardCommentWriteProps) {
const [createBoardComment] = useMutation<
Pick<IMutation, "createBoardComment">,
IMutationCreateBoardCommentArgs
>(CREATE_BOARD_COMMENT);
const [updateBoardComment] = useMutation<
Pick<IMutation, "updateBoardComment">,
IMutationUpdateBoardCommentArgs
>(UPDATE_BOARD_COMMENT);
const [writer, setWriter] = useState("");
const [password, setPassword] = useState("");
const [comment, setComment] = useState("");
const [star, setStar] = useState(0);
const router = useRouter();
const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => {
setWriter(event.target.value);
};
const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => {
setPassword(event.target.value);
};
const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => {
setComment(event.target.value);
};
const updateComment = () => {
alert("수정하기 입니다.");
};
const onClickSubmitComment = async () => {
try {
if (typeof router.query.boardId !== "string") {
alert("시스템에 문제가 있습니다.");
return;
}
const result = await createBoardComment({
variables: {
createBoardCommentInput: {
writer,
password,
contents: comment,
rating: star,
},
boardId: router.query.boardId,
},
refetchQueries: [
{
query: FETCH_BOARD_COMMENTS,
variables: { boardId: router.query.boardId },
},
],
});
} catch (error) {
if (error instanceof Error) {
alert(error.message);
}
}
setWriter("");
setComment("");
setPassword("");
setStar(0);
};
return (
<BoardCommentWriteUI
handleChangeWriter={handleChangeWriter}
handleChangePassword={handleChangePassword}
handleChangeComment={handleChangeComment}
onClickSubmitComment={onClickSubmitComment}
updateComment={updateComment}
setStar={setStar}
writer={writer}
comment={comment}
password={password}
el={props.el}
/>
);
}
boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지
함수가 작동을 안하는 것인지
updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.
수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요
import * as S from "../../board/commons/style/style";
import * as Own from "./boardCommentWrite.styles";
import { IBoardCommentWriteProps } from "./boardCommentWrite.types";
export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) {
console.log(props.el);
return (
<S.BoardWrapper>
<S.Row>
<Own.Writer
placeholder="작성자"
onChange={props.handleChangeWriter}
value={props.editComment ? props.el?.writer : props.writer}
readOnly={props.editComment}
/>
<Own.Password
placeholder="비밀번호"
onChange={props.handleChangePassword}
value={props.password}
/>
<Own.RankWrapper>
<Own.RateComment
value={props.editComment && props.el.rating}
onChange={props.setStar}
/>
</Own.RankWrapper>
</S.Row>
<Own.Comment
onChange={props.handleChangeComment}
placeholder="댓글을 입력해주세요."
value={props.editComment ? props.el.contents : props.comment}
/>
<Own.BottomComments>
<S.Row>
<p>0</p>
<div>/</div>
<p>100</p>
</S.Row>
{/* <Own.SubmitButton
onClick={
props.editComment ? props.updateComment : props.onClickSubmitComment
}
>
{props.editComment ? "수정하기" : "등록하기"}
</Own.SubmitButton> */}
{props.editComment ? (
<Own.SubmitButton onClick={props.updateComment}>
수정하기
</Own.SubmitButton>
) : (
<Own.SubmitButton onClick={props.onClickSubmitComment}>
등록하기
</Own.SubmitButton>
)}
</Own.BottomComments>
</S.BoardWrapper>
);
}
답변 1
0
안녕하세요! 룰루리랄라님!
올려주신 코드만 보아서는 오타도 없고, 제대로 작동해야 정상일 것 같아요!
보통, 이렇게 "당연히 돼야하는데 왜 안되지...?" 와같은 문제를 만나게 되시면,
꼭 이 질문 이외에도 아래의 방법을 항상 따라해 보시면 거의 100% 해결되실겁니다!^^
[대부분의 문제 종류]
node_modules, .next 등의 문제
알고보니 잘못 작성했던 코드상의 오류
버전 문제
[해결방법]
node_modules와 .next 폴더를 삭제하고 yarn install을 다시 해 주시고 실행해보세요!
=> 기존에 실행했던 코드내역이 새로운 코드로 리프레시가 안되었거나, 새롭게 적용되는 과정에서 발생된 문제일 수 있어요!위 1번으로 해결이 안되었다면, 지금 해결하려는 내용을 제외하고 나머지 모든부분을 주석합니다.(관련된 내용의 함수명/변수명을 조금씩 변경해 보거나, console.log를 활용하여 잘 넘어오는지 체크해 보세요)
1) 그랬는데 되는 경우: 주석했던 내용을 풀면서 어떤 주석을 풀었을때 문제가 발생하는지 찾아내기
2) 그랬는데도 안되는 경우: 새로운 next폴더를 create-next-app으로 생성한 다음, 관련 파일만 최소한으로 이동시켜서 실행 => 보통은 여기서 다 해결됩니다(여기서 해결되면 본 프로젝트 폴더에서 app, layout 등 관련된내용 전부다 주석처리하고 하나씩 풀면서 원인을 찾아갑니다)보통 2번까지 했는데도 안되신다면, 그건 버전문제가 99%이므로, create-next-app을 다른 버전으로 만들거나, 추가로 설치되는 라이브러리를 버전을 바꿔가면서 설치해보시면 결국 해결됩니다!^^
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
36
1
댓글 기능 구현 중 질문드립니다.
0
66
1
쿠폰코드 발급
0
131
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
86
2
문의드립니다!! ㅠㅠ
0
101
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
76
2
_app.js 작성 이후로 에러가 발생하네요
0
93
2
학습자료
0
70
2
학습자료가 안열립니다.
0
48
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
59
0
기존강의 구매자, 업데이트 끝인가요?
0
108
3
업데이트 버전 수강
0
88
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
81
1
graphql 접속이 안됩니다.
0
100
2
const, let 사용 질문 드립니다.
0
70
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
80
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
166
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
183
2
2분 44초 질문
0
131
3





