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