Question

我正在尝试为我用React 提取的每个元素动态创建一个单独的卡。

对于React还是一个新手，我遇到了一个问题，即我无法映射每个元素，因此无法在 html 中使用它们。我得到的官方错误是：

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

这是我的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将首先使用初始状态在fetch调用完成之前呈现。在您的初始状态下，没有数据。

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

json

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

1 个答案: