React組件生命週期雙渲染

我在我的app.jsx文件中調用了一個web服務，該文件存儲返回到商店中的數組（使用Redux）。React組件生命週期雙渲染

它似乎激發我的組件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 
});

來源

2016-12-15 Stef

你可以分享組件代碼嗎？ –

數組的默認值可能工作:) –

Hiya，代碼添加。我也試過一個默認數組，我應該只刪除第一個（空）對象嗎？ – Stef

我與另一名開發人員的幫助想通了這一點。

我安裝了Lodash庫，並在get（sortedChannels，'[0] .title'）中包裝sortedChannels [0] .title，成爲一個等待某些東西不被定義的Lodash函數。

Lodash get

來源

2016-12-16 06:36:54 Stef

React組件生命週期雙渲染

回答

相關問題