Отображение данных с помощью ReactJS - Невозможно прочитать свойство 'map' из неопределенного

Question

Я пытаюсь создать отдельную карту динамически для каждого элемента, который у меня есть доставлено с помощью React.

Будучи довольно новым для React, у меня возникла проблема, когда я не могу отобразить каждый из своих элементов, чтобы я мог использовать их в html . Официальная ошибка, которую я получаю:

Невозможно прочитать свойство 'map' из неопределенного

Вот ссылка на мои данные json

Это мой код React:

export class ZonePreviewMenu extends React.Component {
constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        rooms: []
    }
}

componentDidMount(){
    this.fetchData();
}

fetchData(){
    fetch("https://api.myjson.com/bins/r5pn2")
    .then(response => response.json())
    .then(data => console.log(data))
    .then(data => {this.setState({data: data })})
    .catch(error => console.log("parsing failed", error))
}

    render(){
        return(

                <div className="zone-panel">
                    <h2> Zones </h2>
                 { this.state.data.map((item, i) => {
                    console.log(item.name)
                 })

                 }

                    <div className="image-panel">
                        <div className="#">
                            <div className="icon-row-one">
                                <img src={thermoIcon}/> 21C
                                <button className="btn btn-default btn-circle btn-lg top-buttons"><img src={cameraIcon}/></button>
                                <button className="btn btn-default btn-circle btn-lg lights-button"><img src={lightsIcon}/></button>
                            </div>
                            <div className="icon-row-two">
                                <img src={peopleIcon}/> 60
                            </div>
                        </div>
                    </div>
                </div>
        );
    }
}

Это та часть, где я получаю сообщение об ошибке:

             { this.state.data.map((item, i) => {
                console.log(item.name)
             })

             }

Вопрос: Почему я получаю эту ошибку и как я могу создать карточку для каждого элемента опубликованного объекта JSON.

Answer 1

React будет сначала визуализироваться до завершения вызова выборки, используя начальное состояние. В исходном состоянии нет данных.

Определить данные как пустой массив в исходном состоянии

constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        rooms: [],
        data: []
   }
}