Reactjs 为什么我会收到错误消息onVideoSelect不是一个函数？

我接受了一个教程，并在

上设置了一个onClick，但我的logshow onVideoSelect不是一个函数，我无法理解它

我错过了哪一步

bundle.js:20945 Uncaught TypeError: onVideoSelect is not a function

但我发现我的onVideoSelect是正确的

开发人员控制台显示：

onClick在我的
video\u list\u item.js上

bundle.js:20945 Uncaught TypeError: onVideoSelect is not a function
    at onClick (bundle.js:20945)
    at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:4592)
    at executeDispatch (bundle.js:4392)
    at Object.executeDispatchesInOrder (bundle.js:4415)
    at executeDispatchesAndRelease (bundle.js:3845)
    at executeDispatchesAndReleaseTopLevel (bundle.js:3856)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (bundle.js:4692)
    at Object.processEventQueue (bundle.js:4061)
    at runEventQueueInBatch (bundle.js:4721)
onClick @ bundle.js:20945
ReactErrorUtils.invokeGuardedCallback @ bundle.js:4592
executeDispatch @ bundle.js:4392
executeDispatchesInOrder @ bundle.js:4415
executeDispatchesAndRelease @ bundle.js:3845
executeDispatchesAndReleaseTopLevel @ bundle.js:3856
forEachAccumulated @ bundle.js:4692
processEventQueue @ bundle.js:4061
runEventQueueInBatch @ bundle.js:4721
handleTopLevel @ bundle.js:4737
handleTopLevelWithoutPath @ bundle.js:14943
handleTopLevelImpl @ bundle.js:14923
perform @ bundle.js:6889
batchedUpdates @ bundle.js:10926
batchedUpdates @ bundle.js:6394
dispatchEvent @ bundle.js:15054

video_list.js：

import React from 'react';
import VideoListItem from './video_list_item';
const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return (
      <VideoListItem
        onVideoSelect={props.onVideoSelect}
        key={video.etag} 
        video={video} />
    );
  });
  return (
    <ul className="col-md-4 list-group">
      {videoItems}
    </ul>
  );
};
export default VideoList;

从“React”导入React；
从“/video_list_item”导入VideoListItem；
const VideoList=（道具）=>{
const videoItems=props.videos.map（（视频）=>{
返回(
);
});
返回(

{videoItems}

);
};
导出默认视频列表；

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';
import VideoDetail from './components/video_detail';
const  API_KEY = 'AIzaSyDUPTN4QS3S356jXT23h72_ftMMxZIo0n4';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: [],
      selectedVideo: null
    };
    YTSearch({key: API_KEY, term: 'surfboards'}, (getData) => {
      this.setState({
        videos: getData,
        selectedVideo: getData[0]
      });
    });
  }
  render() {
    return (
      <div>
        <SearchBar />
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={selectedVideo => this.setState({selectedVideo}) }
          videos={this.state.videos} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.querySelector('.container'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“youtube api搜索”导入搜索；
从“./components/search_bar”导入搜索栏；
从“./components/video_list”导入视频列表；
从“./components/video_detail”导入VideoDetail；
const API_KEY='AIzaSyDUPTN4QS3S356jXT23h72_ftMMxZIo0n4'；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
视频：[]，
selectedVideo:空
};
YTSearch（{key:API_key，术语：'surfboards'}，（getData）=>{
这是我的国家({
视频：getData，
selectedVideo:getData[0]
});
});
}
render（）{
返回(
this.setState（{selectedVideo}）}
视频={this.state.videos}/>
);
}
}
ReactDOM.render（
尝试以下操作：

  selectVideo = selectedVideo => this.setState({selectedVideo})

  render() {
    return (
      <div>
        <SearchBar />
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={this.selectVideo}
          videos={this.state.videos} />
      </div>
    );
  }

selectVideo=selectedVideo=>this.setState（{selectedVideo}）
render（）{
返回(
);
}

请务必将selectVideo声明为与在类应用程序内部渲染相同的级别，请尝试以下操作：

  selectVideo = selectedVideo => this.setState({selectedVideo})

  render() {
    return (
      <div>
        <SearchBar />
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={this.selectVideo}
          videos={this.state.videos} />
      </div>
    );
  }

selectVideo=selectedVideo=>this.setState（{selectedVideo}）
render（）{
返回(
);
}

声明selectVideo与在类应用程序内部渲染处于同一级别非常重要，不再出现错误，您可以在代码沙盒上查看此共享

您需要更改为以下+console.dir：

const VideoListItem = (props) => {
  console.dir(props);
  const imageUrl = video.snippet.thumbnails.default.url;
  return (
    <li onClick={props.onVideoSelect(props.video)} className="list-group-item">
      <div className="video-list media">
        <div className="media-left">
          <img className="media-object" src={imageUrl} />
        </div>
        <div className="media-body">
          <div className="media-heading">{video.snippet.title}</div>
        </div>
      </div>
    </li>
  );
};

const VideoListItem=（道具）=>{
console.dir（道具）；
const imageUrl=video.snippet.thumbnails.default.url；
返回(

{video.snippet.title}

);
};

并改为：

class App extends Component {
  constructor(props) {
    super(props);
    ......
    this.onVideoSelect.bind(this);
}
onVideoSelect(video){
   this.setState({selectedVideo:video});
  }
render() {
    return (
      <div>
        <SearchBar />
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={ selectedVideo => onVideoSelect(selectedVideo) }
          videos={this.state.videos} />
      </div>
    );
  }

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
......
this.onVideoSelect.bind（this）；
}
onVideoSelect（视频）{
this.setState（{selectedVideo:video}）；
}
render（）{
返回(
onVideoSelect（selectedVideo）}
视频={this.state.videos}/>
);
}

这是我执行select video时的console.log/output和代码图像：

不再出现错误，您可以在代码沙盒上查看此共享

您需要更改为以下+console.dir：

const VideoListItem = (props) => {
  console.dir(props);
  const imageUrl = video.snippet.thumbnails.default.url;
  return (
    <li onClick={props.onVideoSelect(props.video)} className="list-group-item">
      <div className="video-list media">
        <div className="media-left">
          <img className="media-object" src={imageUrl} />
        </div>
        <div className="media-body">
          <div className="media-heading">{video.snippet.title}</div>
        </div>
      </div>
    </li>
  );
};

const VideoListItem=（道具）=>{
console.dir（道具）；
const imageUrl=video.snippet.thumbnails.default.url；
返回(

{video.snippet.title}

);
};

并改为：

class App extends Component {
  constructor(props) {
    super(props);
    ......
    this.onVideoSelect.bind(this);
}
onVideoSelect(video){
   this.setState({selectedVideo:video});
  }
render() {
    return (
      <div>
        <SearchBar />
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={ selectedVideo => onVideoSelect(selectedVideo) }
          videos={this.state.videos} />
      </div>
    );
  }

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
......
this.onVideoSelect.bind（this）；
}
onVideoSelect（视频）{
this.setState（{selectedVideo:video}）；
}
render（）{
返回(
onVideoSelect（selectedVideo）}
视频={this.state.videos}/>
);
}

这是我执行select video时的console.log/output和代码图像：

谢谢你的建议，我不确定你的意思，但我已经更新了我的问题。请看一下我的问题。你能添加一个断点，看看当你在onClick中时onVideoSelect的值是什么吗？对不起，我是React的新手，我真的不知道如何在React中用
Atom
设置断点。我可以设置
何时出现错误，何时显示页面或何时单击视频？谢谢你的建议，我不确定你的意思，但我已经更新了我的问题。请看一下我的问题。当你在onClick中时，你能添加断点并查看onVideoSelect的值吗？对不起，我是React的新手，我真的不知道“我不知道如何在React中使用
Atom
设置断点。我可以设置
何时发生错误，何时显示页面，何时单击视频？感谢您的帮助，当我尝试代码时，我得到的错误是
bundle.js:47未捕获错误：找不到模块”。/src/index.js”
它甚至让我编译失败，我不明白。啊，对不起，在selectVideo前面没有const再次感谢，我已经尝试过了，但是没有const，我将得到错误
bundle.js:148未捕获引用错误：selectVideo未定义
啊，对不起，它也应该是：{this.selectVideo}谢谢你的帮助，当我尝试代码时，我得到的错误是
bundle.js:47未捕获错误：找不到模块“/src/index.js”
它甚至让我编译失败，我不明白。啊，对不起，在selectVideo前面没有const再次感谢，我已经尝试过了，但是没有const，我将得到错误
bundle.js:148未捕获引用错误：selectVideo未定义
啊，对不起，它也应该是：{this.selectVideo}谢谢你的帮助，我一步一步地编写你的代码，我仍然得到错误
未捕获的类型错误：onVideoSelect不是一个函数
，我想我可能没有键入错误@徐博俊 看看代码沙盘