javascript - map 函数reactjs出错

Question

我的 map 功能出现错误。我不知道可能是什么原因，但它说 this.state.rooms.map 不是一个函数。我已经从 api 获取数据并推送到一个空列表中。列表已成功更新内容，但无法对其应用 map 功能。

这是我的代码

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

我在控制台上得到的是

房间[]

组件DidMount

房间对象{设施:“厨房，电缆”，城市:“城市”，电子邮件:“tushant@gmail.com”，listingName:“tushant”，ownerName:“tushant”…}

未捕获类型错误:this.state.rooms.map 不是函数

Answer 1

正如 @sfletche 提到的 map 函数仅适用于数组。 将您的成功回调更改为

success: (data) => {
    this.setState({rooms: data.objects});
 },
 error: (xhr, status, err) => {
    console.error(url, status, err.toString());
  }
});