좋아요 버튼 동시 작동 문제 질문드립니다

[애플애플]

게시글 내에 좋아요 버튼 과 찜하기 버튼을 구현중입니다

전체 게시글 div는 map으로 크게 감싸고있고  각각의 on off div는 import 해와서 삼항연산자로 클릭시 하트의 불이 켜지고 한번 더 클릭하면 불이 꺼지도록 구현한 상태입니다

axios를 사용해서 클릭당 좋아요수가 1 증가가 되도록 구현할 계획인데 문제는 클릭을 하면 모든 게시물의 하트에 불이 들어온다는 것입니다ㅠㅠ 

지난번에 알려주신 input태그의 value와 같은 것도 없어서 어떻게 해야  각 게시물마다 버튼이 클릭되게 구현할 수 있을지 질문드립니다

[codingapple]

하트누른 상태를 저장하는 state가 1개 뿐이라 그런게 아닐까요 아마 게시물마다 있어야할듯요 

[애플애플]

 

전체 게시물을 map으로 돌린 상태인데 게시물 갯수만큼 state가 추가되려면 state도 반복문을 돌려야하는 건가요?

state를  하나만들었고 true false값으로 클릭하면 하트의 색상이 변경되도록 구현한 상태입니다

[codingapple]

게시물이 3개면 [false, false, false] 이렇게 state 만들어두는게 좋겠군요 

[애플애플]

 let [heart, heart_change] = useState([false]);

배열처리를 해주었는데도 heart가 모든 게시물에서 동시에 움직입니다ㅠㅠ

 

   {
              heart === false
              ?  <img className="main_herat_off" src="img/main_heart_off.png"
                onClick={closeheart} onChange={()=> saveID(a._id)}/>

              : <img className="main_herat_off" src="img/main_heart_on.png"
                onClick={closeheart} onChange={()=> saveID(a._id)}/>
              }

하트를 클릭하면 불이 켜지고 한번 더 누르면 꺼지게 동작하는 코드는 삼항연산자를 사용해서 코드를 짰는데

이부분에서도 뭔가를 건들여야 할까요?  

[codingapple]

게시물마다 각각 하트누른 여부를 기록해야하지않을까요 

게시물이 3개면 [게시물1하트누른여부, 게시물2하트누른여부, 게시물3하트누른여부 ] 이게 state로 필요할듯요

[애플애플]

선생님 말씀대로 state값에 배열을 줘서 false값이 반복으로 들어가게 만들었습니다.

배열처리를 하니 게시글의 하트버튼이 각각 움직이지만 문제는 [0]번쨰 배열만 작동한다는 점 입니다.

밑의 삼항연산자를 반복문으로 돌려야 할 것 같은데  map함수 안에서 삼항연산자를 여러 방법으로 적용시켜봐도 적용이 안돼어서 질문 드립니다ㅠㅠ  삼항연산자를 반복문으로 돌릴 수 있나요??? 

[codingapple]

state만들 때 false값이 반복으로 들어가게 만든 코드는 어떻게됩니까 

map 안에 삼항연산자 쓰는건 자유입니다 

[애플애플]

현재 제가 생각한 방법은 onClick으로 하트가 true 또는 false값으로 채워진 하트 , 비워진 하트로 바뀌게 하는것과

선생님 말씀대로 true또는 false값을 배열에담을 isLike  state를 만들어 3번째 사진과 같이 로그인한 사람의 아이디와 좋아요를 누른 사람이 같다면 isLike에 true값을 담아 주고

삼항연산자를 isLike.map으로 돌려 게시물에 뿌려주는 것 입니다 

여러가지 방법을 써보았는데도 잘 코드가 잘 먹히지가 않아서 질문 드립니다ㅠㅠ

 state를 두개를 만들어서 하나는 onClick에서 사용할 true false를 비교하는 값을 저장하고

하나는 강사님 께서 말씀하신 게시물의 상태를 저장하는 state를 저장해서

두 state를 사용해서 map과 삼항연산자를 써줘야 하는게 맞을까요?

[애플애플]

 

위에 작성한 글에서 더 수정한 코드로 다시 질문 드립니다

1. 처음에 heart state에 [false]로 기본값을 줘서 게시물의 클릭 여부를 담을 수 있도록 하였고

2. likepost[i] 라는 기본값이 false인 배열을 만들어서 로그인한 사람과 좋아요를 누른 사람이 일치한다면 true 값을 아니라면 fasle 값이      heart state에 담겨지도록 작성 하였습니다. 

3. 그 뒤 게시물의 ID값을 받아와서 좋아요 클릭과 좋아요 취소 핸들러에 axios를 사용해서 좋아요 갯수가 증가 및 감소가 될 수 있도록 하였고 heart값이 변환되도록 변경하였습니다

4. 6번째 사진과 같이 하트이미지는 삼항연산자를 이용해서 heart 배열에 담긴 true false 값으로 각 게시물 마다 하트가 보여질 수 있도록 작성하였습니다 

5. 하지만 마지막 사진과 같이 값이 true임에도 불구하고 하트에 빈 배열이 뜨는 에러가 발생합니다..  좋아요 갯수의 증가와 감소는 잘 동작하지만 이상하게도 true false 값과 맞지 않게 하트가 제멋대로 보여지는 문제가 있어서 질문 드립니다.. 부탁드립니다ㅠㅠ

 

 

 

[글쓴이]

글