React 组件生命周期双重渲染

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, '[0].title') 中，get 是一个 Lodash 函数，等待未定义的东西。

Lodash get

React 组件生命周期双重渲染

React component lifecycle double render

javascript

reactjs

redux

react-redux