javascript - 无法直接为JSX子元素的点击事件添加回调函数

Question

我目前正在尝试构建 YouTube 克隆。我正在尝试使用从父组件传递到子组件的回调函数来操纵状态。 但问题是我无法将回调函数直接分配给我的子 JSX 组件的单击事件。

我将回调函数从父组件 APP 传递到子组件 VideoList，然后再次传递到 VideoListItem。问题出在 VideoListItem 中。如果我将回调函数从 App 直接添加到 JSX，如下所示 onClick={onVideoSelect(video)} ，它会导致无限循环并抛出错误消息“未捕获错误:超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 内部重复调用 setState。React 限制嵌套更新的数量以防止无限循环。”。

但是如果我添加像这样的回调函数onClick={()=> onVideoSelect(video)}，它就会起作用。我想了解为什么会发生此错误以及其背后的概念。

这是我的index.js

import React ,{Component} from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';
// create a new component.That should produce some html

const API_KEY = 'AIzaSyBem7NlPNdK50NStTS4MJDlXBaiRDfI1U0'



class App extends Component  {

    constructor(props){
        super(props);

        this.state = { 
            videos:[],
            selectedVideo: null
        }
        YTSearch(
            { key:API_KEY , term:'spaceart'},
            videos => {
                console.log("Videos Download ::"+videos.length)

                this.setState({
                    videos:videos,
                    selectedVideo:videos[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'));

video_list.js

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

const VideoList = (props)=>{

    const videoComponents = props.videos.map(
        (video) => {
            return <VideoListItem onVideoSelect={props.onVideoSelect} key={video.etag} video={video} />
        }
    )

return (
    <div><ul className="col-md-4 list-group">
    {videoComponents}
    </ul></div>
    );
}

export default VideoList;

video_list_item.js

   import React from 'react';

    const VideoListItem = ({video,onVideoSelect}) => {

        console.log("Enter video list Item");

        return (
            <li onClick={onVideoSelect(video)} className="list-group-item">
                <div cl

 1. List item

assName="video-list media">
                <div className="media-left">
                <img className="media-object" src={video.snippet.thumbnails.default.url } />
           </div>
           <div className="media-body">
                <div className="media-heading">{video.snippet.title} </div>
                </div>
            </div> 
           </li> 
            );
    }

    export default VideoListItem;

Answer 1

当你给一个函数添加括号()时，它就会被执行。所以，这一行

onClick={onVideoSelect(video)}

使函数在遇到此行时立即执行。在这个函数中，您调用 setState，因此状态更新并触发 render 方法，然后该方法再次执行您的 onVideoSelect 方法，并形成一个循环。您需要传递给 onClick，这是一个函数的引用。当点击事件发生时，onClick 会执行您传递给它的函数。

onClick={() => onVideoSelect(video)}