usestate가 적용이 안되요.

[정근혁]

like핸들러로 누를시 업데이트 해주는 방식으로 사용했는데.. 적용이 2번눌러야 됩니다.

 const likeHandler = async () => {
    try {
      await axios
        .post(`/api/post/like/${id}`, {
          user: user,
          like: post.like,
        })
        .then((res) => setPost(res.data));
    } catch (error) {
      alert(error);
    }
  };

useeffect는 이미 like가 들어있을 detail 페이지를 불러올때 사용해서 setPost가 이미 들어가있는상태라 이걸로는 안될것같습니다

그래서 window.location.reload로 그냥 새로고침을 해줬는데 그방법외에 새로고침없이 사용할방법이 없을까요?

function Post() {
  const navigate = useNavigate();
  const location = useLocation();
  const likeRef = useRef();

  const user = useSelector((state) => {
    return state.rootReducer.user.userData;
  });
  const { id } = useParams();
  const [post, setPost] = useState({});

  const postDeletehandler = async () => {
    try {
      await axios.post(`/api/post/delete/${id}`).then(navigate('/list'));
    } catch (error) {
      alert(error);
    }
  };
  const likeHandler = async () => {
    try {
      await axios
        .post(`/api/post/like/${id}`, {
          user: user,
          like: post.like,
        })
        .then((res) => setPost(res.data));
    } catch (error) {
      alert(error);
    }
  };

  //////포스트 받아오기
  useEffect(() => {
    const fetchPost = async () => {
      try {
        const res = await axios.get(`/api/list/post/${id}`);
        setPost(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    fetchPost();
  }, []);

  let content = post.content;
  return (
    <div className='post'>
      <header className='postHead'>
        <h3 className='post-title'>{post.title}</h3>
        <div className='postInfo'>
          <div className='postInfo-info'>
            {' '}
            <p className='id'>{post.id}</p>
            <p className='date'>{elapsedTime(post.date)}</p>
            <p className='views'>{post.views}</p>
          </div>
          <div className='postlink'>
            <div>
              link Icon
              < img src='' alt='' />
            </div>
            
              http://localhost:3000{location.pathname}
            
          </div>
        </div>
      </header>
      <main className='postContent'>
        {/* Dompurify 라이브러리 사용해서 설정해줘야함 */}
        {/* {typeof window !== "undefined" && <div
            dangerouslySetInnerHTML={{
              __html: Dompurify.sanitize(data?.fetchBoard.contents),
            }}></div>}
    */}
        <div
          className='postContent-main'
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>

        <footer className='postContent-footer'>
          <button className='like' name='like' onClick={likeHandler}>
            좋아요 👍 {post.like?.length}
          </button>
          <button className='hate' name='hate' onClick={likeHandler}>
            싫어요 🤢 {post.hate?.length}
          </button>
        </footer>
      </main>
      <footer className='postFooter'>
        <div className='share-edit'>
          <div className='footer-share'>share</div>
          {user?.id === post.id ? (
            <div className='footer-editbox'>
              {' '}
              <Link to={`/api/post/edit/${id}`}>
                <button className='footer-editbox-edit'>edit</button>{' '}
              </Link>
              <button
                className='footer-editbox-delete'
                onClick={postDeletehandler}
              >
                delete
              </button>
            </div>
          ) : null}
        </div>
        <Comment />
      </footer>
    </div>
  );
}

전체 코드입니다

[정근혁]

아무리 해봐도 이상한게 실제로 state로 변화가없습니다.. 그런데 버튼클릭시에 렌더링이 되긴합니다..
 뭐가 문제인지..
 



console 로그로 변수바뀔때마다 확인도해봣는데.. 안됩니다.
render 콘솔로그는 return문 바로 위에 뒀습니다.

[글쓴이]

글