當渲染返回另一個組件時，React不調用componentWillMount

Question

我有以下組件

const Dashboard = React.createClass({
  getInitialState(){
    return {
      user: JSON.parse(localStorage.getItem('user'))
    };
  },

  componentWillMount(){
    var self = this;
    $.get({
      url: 'http://127.0.0.1:8080/v1/rooms',
      headers: {
        'Auth-Token': self.state.user.backendAccessToken
      },
      success: function(data){
        var rooms = []
        for (var i in data) {
            rooms.push({id: data[i].uid, content: data[i]})
          }
        self.setState({rooms: rooms});
        console.log(rooms);
      }
    })
  },

  render(){
    return(
      <RoomList rooms={this.state.rooms} />
      // <div></div>
    );
  }
});

export default Dashboard;

和

import React from 'react';
import RoomLink from './RoomLink';

const RoomList = React.createClass({
  render: function() {
    var roomList = this.props.rooms.map(function(room) {
      return (<RoomLink room={room} />)
    });
    return (
      <div>
      { roomList }
      </div>
    );
  }
});
export default RoomList;

當運行時，我得到RoomList.js:21 Uncaught TypeError: Cannot read property 'map' of undefined ，並且console.log和我的成功回調從未打印過。 但是，當我渲染一個空的div而不是RoomList組件時，將調用componentWillMount，並且可以在日志中看到響應。
好像React沒有調用componentWillMount 。

Answer 1

ajax調用將花費一些時間，而子組件的prop室呈現為未定義狀態，需要處理這種情況。

  render: function() {
    var roomList = (this.props.rooms || []).map(function(room) {
    return (<RoomLink room={room} />)
  });
   return (
    <div>
    { roomList }
    </div>
 );
}

要么

render(){
  return(
   <RoomList rooms={this.state.rooms||[]} />
   // <div></div>
  );
}