为什么我收到onVideoSelect不是函数的错误消息？

Question

我接受了一个教程，并在<li></li>上设置了onClick，但我的日志显示onVideoSelect不是一个功能，我无法理解。

我错过了什么步骤？

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

但我看到我的onVideoSelect是正确的。

开发者控制台显示：

onClick在我的video_list_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

以下是关于传递onVideoSelect

的三个文件

video_list_item.js：

const VideoListItem = ({video, onVideoSelect}) => {
  const imageUrl = video.snippet.thumbnails.default.url;
  return (
    <li onClick={() => onVideoSelect(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>
  );
};

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;

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

如果我使用<li onClick={console.log(video)} className="list-group-item"></li> 我可以看到像这样的价值：

Answer 1

试试这个：

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

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

将classVideo声明为与类App

中的渲染相同的级别非常重要

Answer 2

不再出现错误，您可以在代码沙箱中查看此共享this online solution/editor。

您需要更改为以下+ 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>
  );
};

并改为：

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

当我执行选择视频时，这是console.log /输出和代码图像：