javascript - React JS - 未捕获的类型错误 : props. video.map 不是函数

Question

我是 React 的新手，正在尝试调试我看到的以下错误。

错误 #1:

Uncaught TypeError: props.videos.map is not a function
at new VideoList 

错误 #2:

bundle.js:19956 Error: findComponentRoot(..., .0.0.0): Unable to find element.
This probably means the DOM was unexpectedly mutated (e.g., by the browser), 
usually due to forgetting a <tbody> when using tables, nesting tags like 
<form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. 
Try inspecting the child nodes of the element with React ID ``.

这是我引用这个文件的代码:

import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return <VideoListItem key={video.etag} video={video} />
  });
  return (
    <ul className ="col-md-4 list-group">
    {videoItems}
    </ul>
  );
};

export default VideoList;

Index.js 文件:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list'
const API_KEY = '';



// create a new component.  This component should produce
// some HTML

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { videos: {} };

    YTSearch({key: API_KEY, term: 'React'}, (videos) => {
      this.setState({ videos });
    });
  }

  render() {
  return (

  <div>
  <SearchBar />
  <VideoList videos={this.state.videos} />
  </div>
);
}
}
// Take this component's generated HTML and put it
// on the page (in the DOM)

ReactDOM.render(<App />, document.querySelector('.container'));

我在 SOF 上查看了以下问题，但均无法解决我的问题:

React JS - Uncaught TypeError: this.props.data.map is not a function

React.js this.props.data.map() is not a function

我很难理解为什么它会给我错误 #1，因为我正在使用带有“粗箭头”的函数声明。我假设错误 #2 是错误 #1 的结果。

我做错了什么？

Answer 1

尝试将 videos 默认状态设置为空数组 [] 而不是对象 {}:

this.state = { videos: [] };

发生此错误是因为 map()是一种数组方法，在对象上根本不可用。