인프런 커뮤니티 질문&답변

input 값은 나오는데 select 값은 출력이 안돼요 ㅠ 오류 메세지도 따로 나오는 건 없고 console.log로 cities 값을 볼려고 했는데 빈 Array가 나옵니다 ㅠ

import Header from "./components/Header.js";
import RegionList from "./components/RegionList.js";
import CityDetail from "./components/CityDetail.js";
import CityList from "./components/CityList.js";
import { request } from "./components/api.js";

export default function App($app){
  const getSortBy = () => {
    if (window.location.search){
      return window.location.search.split('sort=')[1].split('&')[0];
    }
    return 'total';
  };
  const getSearchWorld = () => {
    if(window.location.search && window.location.search.includes('search=')){
      return window.location.search.split('search=')[1]
    }  //뒤에 있는 값을 반환
    return '';
  };

  this.state={
    startIdx : 0,
    sortBy : getSortBy(),
    searchWorld: getSearchWorld(),
    region: '',
    cities:'',
  };
  const header = new Header({
    $app, 
    initialState:{
      sortBy:this.state.sortBy, 
      searchWorld:this.state.searchWorld 
    },
    handleSortChange: async(sortBy) => {
      const pageUrl = `/${this.state.region}?sort=${sortBy}`;
      history.pushState(
        null, 
        null, 
        this.state.searchWorld ? pageUrl + `&search=${this.state.searchWorld}` : pageUrl
      );

      //변경된 정렬기준을 적용한 새로운 데이터를 불러옴 (매개변수로 전달받은 새로운 정렬기준인 sortBy 값을 넣어야함)
      const cities = await request(0, this.state.region, sortBy, this.state.searchWorld);
      console.log(cities)
      // 변경된 상태값을 업데이트
      this.setState({
        ...this.state,
        startIdx:0,
        sortBy: sortBy,
        cities: cities,
      });
    },

    handleSearch: async(searchWorld) => {
      //웹사이트 주소를 알맞게 변경
      history.pushState(
        null,
        null,
        `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWorld}`
      );
      const cities = await request(0, this.state.region, this.state.sortBy, searchWorld);

      this.setState({
        ...this.state,
        startIdx:0,
        searchWorld: searchWorld,
        cities: cities
      })
    },
  });
  const regionList = new RegionList();
  const cityList = new CityList({
    $app, 
    initialState:this.state.cities,
    // 아래는 더보기 버튼을 눌렀을 때 실행되는 것 
    handleLoadMore: async() => {
      const newStartIdx = this.state.startIdx + 40;
      const newCities = await request(newStartIdx, this.state.sortBy, this.state.region, this.state.searchWorld);
      this.setState({
        ...this.state,
        startIdx : newStartIdx,
        cities:{
          cities:[...this.state.cities.cities, ...newCities.cities],
          isEnd: newCities.isEnd,
        }
      })

    }
  });
  const cityDetail = new CityDetail();

  this.setState = (newState) => {
    this.state = newState;
    cityList.setState(this.state.cities);
    header.setState({sortBy:this.state.sortBy, searchWorld:this.state.searchWorld});
  };

  const init = async() => {
    const cities = await request(this.state.startIdx, this.state.sortBy, this.state.region, this.state.searchWorld);
    this.setState({
      ...this.state,
      cities: cities, //api 호출의 결과인 cities
    });
  };

  init();
}