React component lifecycle double render

Question

I am calling a web service in my app.jsx file, which stores an array returned into the store (using Redux).

It seems to fire my component, Playlist.jsx, twice. Once before and after the state change.

My problem is that I want to do some logic in the render, but it fails on the above mentioned first attempt because the array doesn't exist in the store yet.

Is there a better way to handle this, using the component lifecycle? Or must I check if the array.length is > 0?

Thanks in advance.

Component code:

var React = require('react');
var {connect} = require('react-redux');
var generalHelpers = require('generalHelpers');
var uuid = require('node-uuid')

export var DataSandbox = React.createClass({
  componentDidMount: function () {

  },
  render: function () {
    var {playlist} = this.props;
    var playlistArr = [];

    // console.log('Sandbox');
    // console.log('Playlist pulled off props: ', playlist);
    // console.log('Playlist array length: ', playlist.length);
    // console.log('Init new playlist array', playlistArr);
    // console.log('Init new playlist array length', playlistArr.length);

    var id;
    var order;
    var title;
    var img;
    var tags;

    playlist.forEach(function (item) {
      if (item['order'] !== undefined) {
        id = uuid();
        order = parseInt(item['order'], 10);
        title = item['subTitle'];
        img = item['channelImage'];
        tags = item['tags'];

        var obj = {
          id,
          order,
          title,
          img,
          tags
        }

        playlistArr.push(obj);
      }
    });

    var sortedChannels = generalHelpers.sortChannelsByOrder(playlistArr, 'order');

    console.log('Sorted channels: ', sortedChannels);
    console.log('Sorted channels length: ', sortedChannels.length);
    console.log(sortedChannels[0]);

    if (sortedChannels.length > 0) {
      console.log(sortedChannels[1].title);
    }
    //var leftTitle = sortedChannels[0].title;

    var renderLeftChannel = () => {
      return (
        <div>
          <b>Title:</b>&nbsp;{}
        </div>
      )
    };

    // var renderChannels = () => {
    //   return sortedChannels.map((item) => {
    //     return (
    //       <div key={item.id}>
    //         <p>
    //           <b>ID:</b>&nbsp;{item.id}
    //           <br />
    //           <b>Order:</b>&nbsp;{item.order}
    //           <br/>
    //           <b>Title:</b>&nbsp;{item.title}
    //           <br/>
    //           <b>Image:</b>&nbsp;{item.img}
    //           <br/>
    //           <b>Tags:</b>&nbsp;{item.tags}
    //         </p>
    //       </div>
    //     )
    //   });
    // };

    return (
      <div>
        {renderLeftChannel()}
      </div>
    )
  }
});

export default connect(
  (state) => {
    return state;
  }
)(DataSandbox);

Code in app.jsx

store.subscribe(() => {
  var state = store.getState();
  console.log('New state: ', state);
});

MainPlaylistAPI.getMainPlaylist().then(function (data) {
  store.dispatch(actions.addMainPlaylist(data));
}, function(e) {
  // Handle errors
});

Answer 1

I figured this out with the help from another developer.

I installed the Lodash library and wrapped sortedChannels[0].title in get(sortedChannels, '[0].title'), get being a Lodash function that waits for something to not be undefined.

Lodash get