Question

我在app.jsx文件中调用了一个Web服务，该文件存储了一个返回到商店的数组（使用Redux）。

似乎解雇我的组件Playlist.jsx两次。在州改变之前和之后。

我的问题是我想在渲染中做一些逻辑，但它在上面提到的第一次尝试时失败了，因为数组在商店中还没有。

使用组件生命周期是否有更好的方法来处理这个问题？或者我必须检查array.length是否> 0？

提前致谢。

组件代码：

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

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

我在另一位开发者的帮助下想出来了。

我安装了Lodash库并将sortedChannels [0] .title包装在get（sortedChannels，＆＃39; [0] .title＆＃39;）中，得到一个Lodash函数，等待某些东西不被定义。< / p>

Lodash get

React组件生命周期双重渲染

1 个答案: