React.js 中的嵌套数据访问

Question

我有一个包含图像列表的视频列表。我想更改悬停时的图像。我创建了一个 activeImgSrcId 来跟踪活动图像。 video.imgList 有一个图像列表。 video.imgList[video.activeImgSrcId] 在我放置调试点时获取所需的 url。但是删除调试点后，我看到了

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

有人可以告诉我我做错了什么吗？访问这种嵌套结构的正确方法是什么？

Answer 1

这可能是您的 prop videoLibrary 在渲染时可能为空的问题。 如果从服务器异步获取数据并且当数据可用时将更新后的 props 传递给您的组件，则最好使用空数组初始化 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>
      ));
  }

Answer 2

正如 @WItVault 已经发布的那样，videoLibrary 可以为 null 甚至未定义。所以你需要为它添加一个检查

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。 如果你对函数中的多个返回语句没问题，你可以使用这种方法。

Answer 3

这可能是因为 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>
      ));
  }