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

我试图将视频数组的元素写入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);

类扩展组件{
组件willmount（）{
this.props.getVideos（）；
}
render（）{
如果（this.props.videos==null）{
log（“它是空的”）；
}否则{
console.log（this.props.videos）；
const videos=this.props.videos.map（video=>video）；
返回{视频}；
}
返回；
}
}
Explore.propTypes={
getVideos:PropTypes.func.isRequired，
auth:PropTypes.object.isRequired，
配置文件：PropTypes.object.isRequired，
视频：PropTypes.object
};
常量mapStateToProps=状态=>({
profile:state.profile，
auth:state.auth，
视频：state.videos.videos
});
导出默认连接(
MapStateTops，
{getVideos}
)（探索）；

给你两条评论：

1） 您应该在map函数中使用所需的属性，因为您调用了“打印整个对象”

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

const videos=this.props.videos.map（video=>{video.\u id}）；

2） 设置默认道具，例如：

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

类扩展组件{
组件willmount（）{
this.props.getVideos（）；
}
render（）{
如果（this.props.videos==null）{
log（“它是空的”）；
}否则{
console.log（this.props.videos）；
const videos=this.props.videos.map（video=>video）；
返回{视频}；
}
返回；
}
}
Explore.defaultProps={
视频：[]
}
Explore.propTypes={
getVideos:PropTypes.func.isRequired，
auth:PropTypes.object.isRequired，
配置文件：PropTypes.object.isRequired，
视频：PropTypes.object
};
常量mapStateToProps=状态=>({
profile:state.profile，
auth:state.auth，
视频：state.videos.videos
});
导出默认连接(
MapStateTops，
{getVideos}
)（探索）；

对象的键是“视频”，而不是“视频”。调用两次是因为React会在另一次渲染组件，因为道具已更改（这就是为什么在two-console.log中看不到相同内容两次的原因）。从记录的内容来看，你应该尝试

this.props.videos.video

，看看它是否不是你想要的。我在你的建议中添加了“this.props.videos.videos.map”，它起了作用…redux…@The_Enigma很高兴听到！享受：）