this.props.videos.map不是一个函数

Question

我正在尝试将视频数组的元素写入h5标记，如下所示。它将数组打印两次到控制台，然后说this.props.videos.map不是一个函数。两个问题，为什么数组打印两次，为什么它不是一个功能后，第三次？地图经过数组是额外的时间吗？

控制台日志

It's null
Explore.js:16 {video: Array(2)}video: Array(2)0: {filter: Array(0), _id: "5b4e2df021b7b40dcb219ed6", description: "ITS ALIVE", key: "orIV61wadyQ", owner: "Death Star", …}1: {filter: Array(0), _id: "5b4e2dff21b7b40dcb219ed7", description: "ITS ALIVE AGAIN", key: "orIV61wadyQ", owner: "Death Star", …}length: 2__proto__: Array(0)__proto__: Object
Explore.js:16 {video: Array(2)}video: (2) [{…}, {…}]__proto__: Object
Explore.js:17 Uncaught TypeError: this.props.videos.map is not a function 

JS文件

class Explore extends Component {
  componentWillMount() {
    this.props.getVideos();
  }
  render() {
    if (this.props.videos == null) {
      console.log("It's null");
    } else {
      console.log(this.props.videos);
      const videos = this.props.videos.map(video => <h5>video</h5>);
      return <div>{videos}</div>;
    }
    return <div />;
  }
}
Explore.propTypes = {
  getVideos: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  videos: PropTypes.object
};
const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth,
  videos: state.videos.videos
});

export default connect(
  mapStateToProps,
  { getVideos }
)(Explore);

Answer 1

给你两条评论：

1)应该在map函数中使用您想要的属性，因为您调用了打印整个对象

 const videos = this.props.videos.map(video => <h5>{video._id}</h5>);

2)设置defaultProps，例如：

class Explore extends Component {
  componentWillMount() {
    this.props.getVideos();
  }
  render() {
    if (this.props.videos == null) {
      console.log("It's null");
    } else {
      console.log(this.props.videos);
      const videos = this.props.videos.map(video => <h5>video</h5>);
      return <div>{videos}</div>;
    }
    return <div />;
  }
}
Explore.defaultProps = {
    videos: []
}
Explore.propTypes = {
  getVideos: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired,
  videos: PropTypes.object
};
const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth,
  videos: state.videos.videos
});

export default connect(
  mapStateToProps,
  { getVideos }
)(Explore);