2개 이상의 코스가 있을 때 장소별 메모를 순차적으로 작성하지 않을 시, 메모가 해당 장소에 추가되지 않고 무조건 첫 번째 장소부터 순서대로 추가되는 버그
<p>{lists[key].memo}</p>
인덱스에 해당하는 key
값으로 반환하고 있기 때문
현재 DB 구조
- lists
[{ name: 장소명, address: 주소, road: 도로명 주소, phone: 전화번호, id: 카카오맵 API에서 제공하는 장소 id, }];
- memoList
[{ id: 카카오맵 API에서 제공하는 장소 id, memo: 유저가 작성한 메모 }];
{
memoList.filter((target: { id: number; desc: string }) => {
if (target.id === item.id) {
return target;
}}).desc
}
lists
와 memoList
안에는 id라는 공통된 값이 있기 때문에 이걸 이용해서 각각의 id가 일치할 때만 해당 아이템을 조회하는 방식을 사용했다.
결과적으로 아무런 아이템도 반환하지 않았다. 그 이유는 모르겠으나 아이템을 반환한다고 해도 의도한 결과가 아니라 memoList
에 있는 모든 아이템을 반환할 거라고 판단했다. map
안에서 실행하는 구문이기 때문에 코스 갯수만큼 item
을 대입할 것이다. 이렇게 되면 target.id
는 item.id
와 무조건 일치할 수밖에 없다.
[{
name: 장소명,
address: 주소,
road: 도로명 주소,
phone: 전화번호,
id: 카카오맵 API에서 제공하는 장소 id,
memo: 유저가 작성한 메모
}];
lists의 DB 구조를 위와 같이 변경한 후 {item.memo}
로 불러오면 끝!
변경된 lists DB구조를 반영한 post DB 구조
{ user: 유저 정보, location: 지역 카테고리, travel_status: 여행전/후 카테고리, hashtag: 해시태그, title: 제목, createdAt: new Date(), likes: 좋아요, lists: [ { name: 장소명, address: 주소, road: 도로명 주소, phone: 전화번호, id: 카카오맵 API에서 제공하는 장소 id, memo: 유저가 작성한 메모 }, { name: 장소명, address: 주소, road: 도로명 주소, phone: 전화번호, id: 카카오맵 API에서 제공하는 장소 id, memo: 유저가 작성한 메모 }, ] }