在道具中提取物体

Question

这是在我的render

内部

const { thumbnail, loading, key } = this.props.video.video;
    console.log(this.props.video.video);

这是我的输出

我想从对象数组中提取缩略图。但是例如，如果我执行this.props.video.video[0]，它是否返回未定义？最后，我计划使用缩略图将其传递给另一个组件，如下所示

videoContent = <TileFeed thumbnail={thumbnail} />;

Answer 1

它是因为道具在渲染时可能未定义，

    const RenderVideos = (props) => {
       if(props.videos===undefined   ){
          return <div>Loading..</div>
       }else{
          return props.videos.map((item)=> <TileFeed thumbnail={item.thumbnail} />)
       }
    }
   ...
   render(){

     return (
        <div>
            <RenderVideos videos={this.props.video.video}/>
        </div>
     )
   }

Answer 2

我认为您正在解析错误的数组对象，请映射该对象以查看所拥有的内容？
尝试一下：

this.props.video.video.map((item)=>{
console.log(item);
});

Answer 3

class Explore extends Component {
  componentDidMount() {
    this.props.getVideos();
  }
  render() {
    const { videos, loading, key } = this.props.videos;
    let videoContent;
    if (videos === null || loading) {
      videoContent = <Spinner />;
    } else {
      videoContent = <TileFeed thumbnail={videos} />;
    }
    console.log({ videoContent });

    return (
      <div className="explore">
        <div className="row">{videoContent} </div>
      </div>
    );
  }
}

Explore.propTypes = {
  getVideos: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  videos: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth,
  videos: state.videos
});

我认为PropTypes有一些问题，我想把它扔掉，因为配置此属性后它现在可以工作