Question

我的地图功能出错了。我不知道可能是什么原因，但它说this.state.rooms.map不是一个函数。我从api获取数据并推入空列表。列表已成功更新内容，但无法在其上应用地图功能。

这是我的代码

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

我在控制台上得到的是

房间[]

componentDidMount

room Object {amenities：＆＃34; Kitchen，Cable＆＃34;，city：＆＃34; city＆＃34;，email：＆＃34; tushant@gmail.com" ;, listingName：＆＃34 ; tushant＆＃34;，ownerName：＆＃34; tushant＆＃34; ...}

未捕获的TypeError：this.state.rooms.map不是函数

Answer 1

对象没有map函数，只有数组。

rooms的第二个输出显示了答案

room Object {amenities: "Kitchen, Cable", city: "city", email: 
"tushant@gmail.com", listingName: "tushant", ownerName: "tushant"…}

rooms现在是一个对象，map函数特定于数组。

Answer 2

因为@sfletche仅提到了数组的map函数。将您的success回调更改为

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

地图函数reactjs

2 个答案: