title: Why is my React component render called twice, once without data and then later with data, but too late exception?
body: <p>I have a component TreeNav whose data comes from api call. I have setup reducer/action/promise and all the plumbing, but in component render when I call map() over the data, getting "Uncaught TypeError: Cannot read property 'map' of undefined". </p>
  
  <p>Troubleshooting revealed TreeNav render() is called twice. 2nd time is after data comes back from api. But due to 1st render() error, 2nd render() never runs.</p>
  
  <p>Here are my code files:</p>
  
  <p>-------- reducers/index.js ---------</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import TreeDataReducer from './reducer_treedata';
  
  const rootReducer = combineReducers({
    treedata: TreeDataReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>-------- reducers/reducer_treedata.js ---------</p>
  
  <pre><code>import {FETCH_TREE_DATA} from '../actions/index';
  
  export default function (state=[], action) {
      switch (action.type) {
          case FETCH_TREE_DATA: {
              return [action.payload.data, ...state];
          }
      }
  
      return state;
  }
  </code></pre>
  
  <p>-------- actions/index.js --------</p>
  
  <pre><code>import axios from 'axios';
  
  const ROOT_URL = 'http://localhost:8080/api';
  
  export const FETCH_TREE_DATA = 'FETCH_TREE_DATA';
  
  export function fetchTreeData () {
      const url = `${ROOT_URL}/treedata`;
      const request = axios.get(url);
  
      return {
          type: FETCH_TREE_DATA,
          payload: request
      };
  }
  </code></pre>
  
  <p>-------- components/tree_nav.js --------</p>
  
  <pre><code>import React, {Component} from 'react';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import {fetchTreeData} from '../actions/index';
  
  class TreeNav extends Component {
    constructor (props) {
      super(props);
  
      this.state = {treedata: null};
      this.getTreeData();             
    }
  
    getTreeData () {
      this.props.fetchTreeData();
    }
  
    renderTreeData (treeNodeData) {
      const text = treeNodeData.text;
  
      return (
        &lt;div&gt;
          {text}
        &lt;/div&gt;
      );
    }
  
    render () {
      return (
        &lt;div className="tree-nav"&gt;
          {this.props.treedata.children.map(this.renderTreeData)}   
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps ({treedata}) {
      return {treedata};
  }
  
  // anything returned from this function will end up as props 
  // on the tree nav
  function mapDispatchToProps (dispatch) {
    // whenever selectBook is called the result should be passed to all our reducers
    return bindActionCreators({fetchTreeData}, dispatch);
  }
  
  // Promote tree_nav from a component to a container. Needs to know about
  // this new dispatch method, fetchTreeData. Make it available as a prop.
  export default connect(mapStateToProps, mapDispatchToProps)(TreeNav);
  </code></pre>