如何修复 React '未定义 no-undef'？

Question

我正在尝试为电影列表中的每部电影创建详细视图。我有 Django 作为后端，React 作为前端。

当我尝试对每部电影进行详细查看时，出现错误。

错误日志：

Failed to compile.

./src/components/movie-list.js
  Line 5:26:  'movie' is not defined  no-undef
  Line 6:28:  'movie' is not defined  no-undef

Search for the keywords to learn more about each error.

我尝试过绑定，但不完全明白问题出在哪里。

应用程序.js

import React, { Component } from 'react';
import MovieList from "./components/movie-list";

  componentDidMount() {
    //fetch data
    fetch('http://127.0.0.1:8000/api/movies/', {
      method: 'GET',
      headers: {
        'Authorization': 'Token 8588cb6fcc2ee0bf9915d4c6b720554347d5883f'
      }
    }).then(resp => resp.json())
      .then(res => this.setState({ movies: res }))
      .catch(error => console.log(error))
  }

  movieClicked = movie => {
    console.log(movie);
  }

  render() {
    return (
      <div className="App" >
        <header className="App-header">
          <h1>Movie Rater</h1>
            <MovieList movies={this.state.movies} movieClicked={this.movieClicked}/>
            <MovieDetails movie={this.state.selectedMovie}/>
        </header>
      </div>
    );
  }
}

电影列表.js

import React from 'react';

function MovieList(props) {

    const movieClicked = movie = evt => {
        props.movieClicked(movie);
    }

    return (
        <div>
            {props.movies.map(movie => {
                return (
                    <h3 key={movie.id} onClick={movieClicked(movie)}>
                        {movie.title}
                    </h3>
                )
            })}
        </div>
    )
}

export default MovieList;

我想让详细视图发挥作用。

Answer 1

您指的是方法范围之外的变量movieClicked。将其更改为：

const movieClicked = (movie) => {
    props.movieClicked(movie);
}

编辑：

正如评论中的一些人指出的那样，简化的解决方案是：

import React from 'react';

function MovieList(props) {
    return (
        <div>
            {props.movies.map(movie => {
                return (
                    <h3 key={movie.id} onClick={() => props.movieClicked(movie)}>
                        {movie.title}
                    </h3>
                )
            })}
        </div>
    )
}

export default MovieList;