에러1
list.map...is not a function
list.map...is not a function 이라는 에러가 콘솔에 찍혔다.
처음에는 다음과 같이 코드를 썼다.
setFlightList(getFlight(condition).then(value => value)) .then 내부에서 setFlightList에게 value 인자를 전달하는 것을 인지하지 못하고 있었다.
getFlight(condition).then(value => value)를 콘솔에 찍어보면 그 자체로 promise와 그 상태가 찍혔는데, list 자리에 promise가 할당되었기 때문에 이런 현상이 발생한 것이다.
따라서 value 자체가 우리가 필요로 하는 배열임을 인지하고 이것을 setFlightList에 전달해야한다.
에러2
{departure: undefined, destination: "BKK"}
페어분은 아니지만 오늘 같이 도움을 요청하신 분께서 해결에 도움을 주셨다..내가 생각하지 못한 면에서 에러를 찾기 위한 방법들을 알려주셔서 너무 감사했다ㅎㅎ
검색창에서 문자열을 입력하고 엔터를 치니 자꾸 빈 배열이 나오는 것이었다.
이를 확인하기 위해 useEffect의 첫번째 인자로 넣어준 함수 사이사이에 console.log를 작성하여 변수의 값을 다 확인해봤다. 그 결과 condition 객체에서 첫번째 키값이 undefined가 나오는 것이었다.
condition 객체는 setCondition이라는 상태갱신함수에 의해서 그 값이 결정되는데, 특이하게도 역방향 데이터 흐름에 따라, setCondition 함수가 하위 컴포넌트인 Search.js에서 실제로 호출되고 있었다. 이에 Search.js 파일을 다시 보았다.
객체의 키 값이 depart로 설정되어 있었던 게 원인이었다..
그리고 페어분께서는 onSearch의 인자로 {departure,destination}으로만 작성하시고 그 위에 다른 변수로
const departure = "ICN", destination = textDestination으로 작성하셨다.
처음에는 무슨 뜻인지 이해가 안되었는데 알고 보니 배웠던 문법이었다.
객체의 키 값을 이미 외부에서 지정해준 경우에는 객체 쓸 때 , 키 이름만 써도 된다고.....
그리고 요새 에러핸들링 로그 한번 써놓고 다시 안보는데, 자꾸 내가 같은곳에서 에러를 만드는거같다.
마지막에 fetch API 사용할때도 then 쓸때 리턴문 안써서 저번에도 에러 있었는데, 이번에도 버벅댄거 보면,,,...반성해야겠다.
매일 조금씩 10분씩이라도 시간 내서 훑어보자.
