Question

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

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

错误日志：

无法编译。

./ src / components / movie-list.js 第5:26行：未定义“电影” no-undef 第6:28行：未定义“电影” no-undef

搜索关键字以详细了解每个错误。

我试图进行绑定，但是不完全了解问题所在。

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

movie-list.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;

Answer 2

您的代码不起作用，因为您的电影变量（在函数内部）具有函数引用（相同的函数），而不是所传递的变量，请在此处查看示例（您可以对其进行测试以了解问题）

const movieClicked = movie = evt => {
    console.log(movie); //shows a function 
    console.log(evt); // shows the actual value (movie123)
}
movieClicked("movie123"); // work
movie("movie123");// work

您的代码等同于

const a = b = 5;

在这里，您得到的结果是a = 5和b = 5，在您的情况下movieClicked = movie，都拥有a函数作为值。根据Phoenix1355的建议，此代码将有效

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

这也将起作用（在这种情况下没有意义，但是您有一天可能会再次对此感到迷惑）

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

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

2 个答案: