React.js中的嵌套數據訪問

我有一系列包含圖像列表的視頻。我想更改懸停時的圖像。我創建了一個activeImgSrcId來跟蹤活動圖像。 video.imgList有一個圖像列表。 video.imgList [video.activeImgSrcId]在放置調試點時提取所需的url。不過取下調試點之後，我看到React.js中的嵌套數據訪問

Cannot read property 'undefined' of undefined

這是我的渲染方法

renderVideoList() { 
    return this.props.videoLibrary.map(video => (
     <div className="col-md-4" key={video.id}> 
     <Link to={`videos/${video.id}`}> 
      <img 
      src={video.imgList[video.activeImgSrcId]} 
      /> 
     </Link> 
     </div> 
    )); 
    }

可能有人請告訴我，我究竟做錯了什麼？訪問這種嵌套結構的正確方法是什麼？

來源

2017-02-15 funkadelic

打印'this.props'的結果是什麼？ – havenchyk

如果只有'this.props.videoLibrary &&（this.props.videoLibrary.length === true）'，才調用'renderVideoList（）'？此外，如果不定義所有視頻必需屬性，則可以在內聯函數中返回「null」。 – nightlyop

這可能是您的道具videoLibrary在渲染時可能爲空的問題。如果從服務器異步獲取數據並且數據可用時，更好地使用空數組初始化videoLibrary將更新的道具傳遞給您的組件。

或

renderVideoList() { 
    return (this.props.videoLibrary||[]).map(video => (
     <div className="col-md-4" key={video.id}> 
     <Link to={`videos/${video.id}`}> 
      <img 
      src={video.imgList[video.activeImgSrcId]} 
      /> 
     </Link> 
     </div> 
    )); 
    }

來源

2017-02-15 08:16:17 WitVault

@havenchyk我也提供了替代選項。順便說一句，如果數組是空的，你認爲地圖會被執行嗎？ – WitVault

對不起，我有意爲其他帖子添加評論：D – havenchyk

@havenchyk沒問題:) – WitVault

由於@WItVault已經發布，videoLibrary可以爲空，甚至不確定。所以，你需要添加一個檢查它

renderVideoList() { 
    const videoLibrary = this.props.videoLibrary 

    if (!videoLibrary) return 

    return videoLibrary.map(video => (
    <div className="col-md-4" key={video.id}> 
     <Link to={`videos/${video.id}`}> 
     <img 
      src={video.imgList[video.activeImgSrcId]} 
     /> 
     </Link> 
    </div> 
)); 
}

我寧願早回報，你不需要它空陣列上運行map。如果你可以在函數中使用多個return語句，你可以使用這種方法。

來源

2017-02-15 10:20:10 havenchyk

我嘗試了所有三種解決方案。他們都沒有工作。如果我添加'src = {video.activeImgSrcId}'我沒有收到錯誤。我們可以像反應中的'video.imgList [video.activeImgSrcId]'那樣訪問數組嗎？ – funkadelic

這可能是由於道具videoLibrary不適用於初始渲染，因此您應該爲它提供檢查。在map函數之前檢查可以簡單如下

renderVideoList() { 
    return this.props.videoLibrary && this.props.videoLibrary.map(video => (
     <div className="col-md-4" key={video.id}> 
     <Link to={`videos/${video.id}`}> 
      <img 
      src={video.imgList[video.activeImgSrcId]} 
      /> 
     </Link> 
     </div> 
    )); 
    }

來源

2017-02-15 10:33:00

你是第三位，請在發佈之前閱讀其他答案 – havenchyk

@havenchyk是一樣的建議，但方法不同 –

@ShubhamKhatri我嘗試了所有這三種解決方案。他們都沒有工作。如果我添加'src = {video.activeImgSrcId}'我沒有收到錯誤。我們可以像反應中的'video.imgList [video.activeImgSrcId]'那樣訪問數組嗎？ – funkadelic

React.js中的嵌套數據訪問

回答

相關問題