Ошибка типа: (промежуточное значение) .map не является функцией при использовании set для Country Api

Question

Я создаю приложение React, которое запрашивает данные у API. Теперь, как часть приложения, я хочу фильтровать по регионам API. Теперь я понимаю, что мне нужно использовать наборы, чтобы извлечь только регионы. Ниже приведен код, который у меня есть:

import React, { Component } from 'react';
import { CountryList } from './Components/Card-List/CountryList';
import { SearchBox } from './Components/Search-box/Search-Box';
import { NavBarCard }from './Components/NavBar/NavBarCard';
import './Countries.styles.css';


class Countries extends Component {
constructor() {
    super();
    this.state = {
        countries:[],
        searchField:"",
        regionField:"",
        darkMode: false
    }
    this.setDarkMode = this.setDarkMode.bind(this);
    this.handleRegion = this.handleRegion.bind(this);
};


componentDidMount() {
    fetch("https://restcountries.eu/rest/v2/all")
    .then(response => response.json())
    .then(all =>  this.setState({ countries: all,
        regions: all}))
}


setDarkMode(e){
    this.setState((prevState) => ({ darkMode: !prevState.darkMode }));
}

handleRegion(e){
    this.setState({regionField: e.target.value})
}
render() {
    const { countries, searchField, regionField, darkMode } = this.state;
    const filterCountries = countries.filter((country) => country.name.toLowerCase().includes(searchField.toLowerCase()) &&
     country.region.toLowerCase().includes(regionField.toLowerCase()));

     return(


            <div className={darkMode ? "dark-mode" : "light-mode" }>

                 <NavBarCard handlechange={this.setDarkMode} moonMode={darkMode ? "moon fas fa-moon" : "moon far fa-moon"} darkMode={darkMode ? "dark-mode" : "light-mode"}/>


                <div className="Input">

                    < SearchBox type="search" placeholder="Search a Country" handlechange={e=> this.setState({
                        searchField: e.target.value })}
                        />


                        <select onChange={this.handleRegion} value={regionField}>
                            {new Set(countries.map(country=>country.region))
                            .map(uniqueRegion => 
                            <option>{uniqueRegion}</option>)}
                        </select>
                </div>
                <CountryList countries={filterCountries} />

            </div>

         )
       }
     }

   export default Countries;

Я получаю ошибку TypeError: (intermediate value).map is not a function для тега Select. Не уверен, что я пропустил. Любая помощь будет оценена.

Answer 1

Нет функции с именем map, определенной над множеством, поэтому вам нужно сначала создать из нее массив. Для этого вы можете использовать Array.from на результат new Set

 <select onChange={this.handleRegion} value={regionField}>
                        {Array.from(new Set(countries.map(country=>country.region)))
                        .map(uniqueRegion => 
                        <option>{uniqueRegion}</option>)}
                    </select>

Answer 2

Вы пытаетесь перебрать Set, Set не предоставляют метод .map. Вы должны преобразовать набор обратно в массив до итерации. Пожалуйста, попробуйте это и посмотрите, работает ли оно.

<select onChange={this.handleRegion} value={regionField}>
{Array.from(new Set(countries.map(country=>country.region)))
.map(uniqueRegion => 
<option>{uniqueRegion}</option>)}
</select>