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

可能是您的道具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>
      ));
  }

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。如果您在函数中使用多个return语句，则可以使用这种方法。

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

React.js中的嵌套数据访问

3 个答案: