Javascript 使用ReactJS显示数据-无法读取属性'；地图'；未定义的

我正在尝试为使用React获取的每个元素动态创建一张单独的卡片

作为一名新手，我遇到了这样一个问题：我无法映射我的每个元素，以便在html中使用它们。我得到的官方错误是：

无法读取未定义的属性“map”

这是一个

这是我的代码：

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>
        );
    }
}

---

问题：为什么会出现此错误，以及如何为发布的JSON对象的每个元素创建卡片。

React将在使用初始状态完成fetch调用之前首先呈现。在初始状态下，没有数据

将数据定义为初始状态下的空数组

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

---

您的获取调用是异步的，因此在呈现尝试映射到此.state.data之前，它不会完成。如果您在状态中初始化数据：[]，数据将不再是未定义的，您将不会看到此错误。通过写入

。然后（data=>console.log（data））

使

中的
数据
。然后（data=>{this.setState（{data:data}）

是未定义的

，所以您应该删除它。@Thole即使这确实解决了错误，我仍然无法对任何项目进行控制台日志记录。我也不能显示它们。响应中的
rooms
是一个具有数组值的对象，这些数组中的每个对象都有一个属性。如果要在渲染方法中对该数据使用
map
，则很可能要将该数据转换为平面数组。@Thole用更改了api数据，但仍然给出相同的结果。无法控制台记录元素或显示段落。
constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        rooms: [],
        data: []
   }
}