Map () не является функцией при вызове конечной точки MVC с использованием реагирования

Question

Привет, я учусь реагировать и пытаюсь вызвать конечную точку MVC из реакции и отобразить результат в таблице.Конечная точка MVC возвращает данные в формате json, как в следующем формате:

{  
"Rooms":[  
  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"3",
           "Total":"31"
        }
     ],
     "id":"R1",
     "
  },
  {  
     "Types":[  
        {  
           "Type":"Orange",
           "Available":"4",
           "Total":"40"
        }
     ],
     "id":"R2",         
  },

  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"25",
           "Total":"30"
        },
        {  
           "Type":"Mango",
           "Available":"23",
           "Total":"36"
        }
     ],
     "id":"R3",         
  },
  {  
     "Types":[  
        {  
           "Type":"Apple",
           "Available":"23",
           "Total":"36"
        },
        {  
           "Type":"Mango",
           "Available":"23",
           "Total":"36"
        },
        {  
           "Type":"Orange",
           "Available":"23",
           "Total":"36"
        }
     ],
     "id":"R4",

   }

]
}

Я получил свои ограниченные знания и прибегнул к поиску чего-то подобного приведенному ниже:

"use strict";

var React = require('react');


var List= React.createClass({

// getInitialState: function(){
//     return({
//         rooms: []
//     });
// },
state: {
    rooms: []
},

componentWillMount: function() {
    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
        this.setState({rooms: Rooms})
    })        
  },
render(){
    var createRoomRow = function(rooms) {
        return (
            <tr key={rooms.id}>
                <td>{rooms.id}</td>
                <td>{rooms.Types}</td>
            </tr>
        );
    };
    return (          


         <div>

         //<p>{JSON.stringify(this.state) }</p>


         {<table className="table"> 
         <thead>
             <th>RoomID</th>
             <th>Types</th>
         </thead>
         <tbody>
            {this.state.map(createRoomRow, this)}
         </tbody>
         </table>             
     </div>
    );      
   }
});

module.exports=List;

Теперь я хочу отобразитьв таблице ID, доступно / всего типов.Я понимаю, что вышеупомянутый jsx не выполняет именно то, что я хочу.

Но я также получаю сообщение об ошибке, Uncaught TypeError: Невозможно прочитать свойство 'map' из null.Заранее спасибо.

Answer 1

Вот несколько предложений:

1. Проверьте, если

    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
    console.log(Rooms) // make sure you are getting the right data
        this.setState({rooms: Rooms})
    }) 

Замените это

{this.state.map(createRoomRow, this)}

на

{createRoomRow}

, а затем

var createRoomRow = this.state.rooms.map(rooms => {
        return (
            <tr key={rooms.id}>
                <td>{rooms.id}</td>
                <td>{rooms.Types}</td>
            </tr>
        );
    });

Использование getInitialState Всего

"use strict";

var React = require('react');


var List= React.createClass({

componentWillMount: function() {
    fetch('https://dummyMVCendpoint.com/json')
    .then(res => res.json())        
    .then(Rooms => {
        this.setState({rooms: Rooms})
    })        
  },
getInitialState: function(){
    return {
      rooms: []
    }
  },
  render: function() {
    var renderExtraRows = (dataList) => dataList.map(list => {
      return (
        <div>
          <span>{list.Type}</span>
          <span>{list. Total}</span>
        </div>        
      );
    });
    var createRoomRow = this.state.rooms.map(item => {
        return (
            <tr key={item.id}>
                <td>{item.id}</td>
                <td>{renderExtraRows(item.Types)}</td>
            </tr>
        );
    });
    return (          


         <div>

         {<table className="table"> 
           <thead>
               <th>RoomID</th>
               <th>Types</th>
           </thead>
           <tbody>
              {createRoomRow}
           </tbody>
           </table>}            
     </div>
    );      
   }

});

module.exports=List;