У меня проблема с запуском функции map для результатов, отфильтрованных по вызову fetch, и я потратил на это 7 часов, но безрезультатно.
Я пытаюсь динамически отобразить список доступных городов на основе выбранной страны.
Сначала пользователь выбирает страну, а затем запускается функция извлечения, получая список всех городов из файла JSON, которые фильтруются через условие 'element ==== element.country'.
По какой-то причине все, что я получаю из функции fetchCityList 'Не удается прочитать свойство' map 'из undefined', и страница падает, даже если при консолье.log результатов они возвращают симпатичный массив объектов.
Как ни странно, функция filterCitiesByCountry возвращает точно такой же результат, что и fetchCityList, но по какой-то причине результаты filterCitiesByCountry передаются в функцию сопоставления просто отлично, если fetchCityList приводит к сбою сайта.
Я также подумал, что, возможно, исходный рендер рушится с сайта, так как выборка занимает некоторое время, и когда рендеринг начинается, fetchCityList возвращает значение NULL, но затем я добавил this.state.citiesFetched, который изменяется только после успешного выбора городов, поэтому я понятия не имею куда идти дальше
// DOM rendering
<select className='custom-select' onChange={this.handleCitySelect} placeholder='City...' required>
<option value='' data-index='City...'> </option>
{ this.state.citiesFetched && this.fetchCityList(this.state.country).map(({name, key}) =>
<option value={name} key={key}> {name} </option>
)}
</select>
// Faulty function resulting in " Cannot read property 'map' of undefined".
// BTW: console.log(country) shows currently selected country from this.state.country so that part is fine.
// BTW2: console.log(res.filter(res => res.country === country)) also shows an array of filtered objects.
fetchCityList = (country) => {
fetch("/weatherly_app/json/citiesList.json")
.then( res => res.json())
.then( res => {
return res.filter(res => res.country === country)
})
.then( res =>
this.setState ({
citiesFetched: true
})
)
};
// Function for setting this.state.city which is then used as parameter for fetchCityList function
handleCountrySelect = (e) => {
this.setState({
country: e.target.value,
country_desc: e.currentTarget['data-desc'],
city: '',
showGetWeatherBtn: false
});
};
// This works perfectly but I was using a huge JSON file imported directly to the component which (I assume) would devastate user loading times
filterCitiesByCountry = (country) => {
return citiesJSON.filter ( city => city.country === country)
};
handleCitySelect = (e) => {
this.setState ({
city: e.target.value
});
};