Блог

Я считываю данные из API и пытаюсь отобразить элементы в массиве данных в теге select в HTML с помощью React, но он продолжает говорить мне, что данные не являются массивом, хотя кажется, что это так, когда я делаю console.log.

 render(){
        console.log(this.state.countries.Countries)
        return(
            <div className = "tables-container">
                <h1>Tables</h1>
                <label>Please Select a Country to view data for:  </label>
                <select name = "countries" id = "countries">
                    <option selected = "selected">Select a Country</option>
                    {
                        this.state.countries.Countries.map((data)=>(
                             <option>{data.Country}</option>
                        ))
                    }
                </select>
            </div>
        )
    }
  

Когда я запускаю это, он говорит: «Ошибка типа: не удается прочитать свойство’map’ неопределенного». Консоль.результат журнала гласит

 (188) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
  

итак, я почти уверен this.state.countries.Countries , что должен быть массив, поэтому функция map должна работать, но это не так.
В моем конструкторе у меня есть

 this.state = {
    countries: [],
}
  

и у меня есть выборка API в

     componentDidMount(){
        fetch("https://api.covid19api.com/summary")
            .then((data) => data.json())
            .then((data) => {
                this.setState({
                    countries: data
                })
            })
    }
  

Я застрял на этом в течение часа, и теперь мне действительно нужна помощь, чтобы разобраться в этом. Спасибо!

 this.state = {
    countries: [],
}
  

this.state.countries начинается как пустой массив. У него нет .Countries свойства, поэтому для вашего первого рендеринга this.state.countries.Countries есть undefined , и вы не можете сопоставить undefined .

Вам нужно, чтобы ваше состояние имело одинаковую форму до и после загрузки данных. Поэтому, если вы хотите .countries.Countries вложенность, измените свое начальное состояние на это:

 this.state = {
  countries: {
    Countries: []
  }
}
  

Если вам нужен только один уровень вложенности, сохраните исходные значения и измените следующее:

 // In componentDidMount
this.setState({
  countries: data.Countries
})

// In render
this.state.countries.map(