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

【问题标题】：How do I fix React ' is not defined no-undef'?如何修复 React \' 未定义 no-undef\'？
【发布时间】：2020-06-13 20:44:54
【问题描述】：

我正在尝试为电影列表中的每部电影创建详细视图。我有 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;

我想让详细视图工作。

【问题讨论】：

你能显示文件movie-list.js 的sn-p 代码吗？
@harisu 是的，我添加了它:)
@Poenix1355 答案很好

标签： reactjs

【解决方案1】：

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

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

编辑：

正如 cmets 中的一些人所指出的，简化的解决方案是：

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;

【讨论】：

或者少了半个箭头const movieClicked = movie => evt => { props.movieClicked(movie); }
难道他/她不能只使用 onClick={props.movieClicked(movie)} 而不定义第二个movieClicked 函数吗？
@giuseppedeponte 我认为这行不通。这样做会使movieClicked 方法返回另一个函数，除非他执行movieClicked(movie)() 之类的操作，否则该函数不会被执行。
click 事件处理程序只是将 DOM 事件作为参数传递，而不是电影
如果他直接 onClick={() => props.movieClicked(movie)} 这将起作用

【解决方案2】：

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

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

【讨论】：