[英]Error in map function reactjs
I am having an error with the map function. 我在使用地图功能时出错。 I dont know what might be the reason but it says this.state.rooms.map is not a function. 我不知道可能是什么原因,但是它说this.state.rooms.map不是函数。 I have fetched the data from api and pushed into an empty list . 我已经从api提取了数据并将其推入一个空列表。 The list is successfully updated with the contents but could not apply map function on it. 该列表已使用内容成功更新,但无法对其应用地图功能。
Here's my code 这是我的代码
import React from 'react';
import ReactDOM from 'react-dom';
export default class RoomList extends React.Component{
constructor(props){
super(props);
this.state = { rooms: [] }
}
componentDidMount(){
console.log('componentDidMount');
this.loadRoomFromServer();
}
loadRoomFromServer(){
$.ajax({
url:'/api/v1/rental/',
dataType:'json',
success: (data) => {
this.setState({rooms: data});
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
}
});
}
render(){
console.log('rooms',this.state.rooms);
let listOfRoom = this.state.rooms.map((room)=>{
return(
<Room key={room.id} name={room.listingName} price={room.price} number={room.room} />
)
});
return(
<div className="container-fluid">
<div className="row">
{ listOfRoom }
</div>
</div>
)
}
}
class Room extends React.Component{
render(){
return(
<div className="col-md-4">
<h2>{this.props.name}</h2>
<p>{this.props.price}</p>
<p>{this.props.number}</p>
</div>
)
}
}
what i get on the console is 我在控制台上得到的是
room [] 房间[]
componentDidMount componentDidMount
room Object {amenities: "Kitchen, Cable", city: "city", email: "tushant@gmail.com", listingName: "tushant", ownerName: "tushant"…} room对象{设施:“厨房,电缆”,城市:“城市”,电子邮件:“ tushant@gmail.com”,listingName:“ tushant”,所有者名称:“ tushant”…}
Uncaught TypeError: this.state.rooms.map is not a function 未捕获的TypeError:this.state.rooms.map不是函数
There is no map
function for objects, only arrays. 没有对象的map
功能,只有数组。
Your second output of rooms
shows the answer rooms
第二个输出显示答案
room Object {amenities: "Kitchen, Cable", city: "city", email:
"tushant@gmail.com", listingName: "tushant", ownerName: "tushant"…}
rooms
is now an object and the map
function is specific to arrays. 现在, rooms
是一个对象,而map
函数特定于数组。
as @sfletche mentioned map
function for arrays only. 正如@sfletche提到的map
函数仅用于数组。 change your success
callback to 将您的success
回调更改为
success: (data) => {
this.setState({rooms: data.objects});
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.