Реакция: onClick event.currentTarget.textContent, возвращающий onClick из неопределенного - PullRequest
Новая
       11

Реакция: onClick event.currentTarget.textContent, возвращающий onClick из неопределенного

0 голосов
/ 23 марта 2020

На моем веб-сайте в настоящее время он показывает пользователям список фильмов, основанный на их входных данных.

Когда пользователь нажимает на название воспроизводимого mov ie, я хочу задать setState (selectedOne: the mov ie title, на который они нажали).

В настоящее время, когда я нажимаю на заголовок mov ie, он возвращает ошибку, сообщающую следующее: 

Uncaught TypeError: Cannot read property 'onClick' of undefined
    at onClick (Fav.js:62)

Есть ли способ это исправить? Любая помощь с благодарностью. 

import React, { Component } from 'react'
import axios from 'axios';
import '../styles/Rec.scss'

export class Fav extends Component {
    constructor (props) {
        super (props) 
            this.state = {
                inputOne: '',
                chosenOne: '',
                movies:[],
            };
    }

    onChangeOne = (event) => {
        this.setState({
            inputOne: event.target.value
        },()=>{
            if(this.state.inputOne && this.state.inputOne.length > 1) {
                this.getInfo()
            } else {
            }
        })

    }

    onClick = (event) =>{
        this.setState({
            chosenOne: event.currentTarget.textContent
        })
        console.log(this.state.chosenOne)
    }

    onSubmit = (event) => {
        event.preventDefault();
    }

    getInfo = () => {
        let url = `https://api.themoviedb.org/3/search/movie?api_key=''&language=en-US&query='${this.state.inputOne}'&page=1&include_adult=false`
        axios.get(url)
        .then(res => {
        if (res.data) {
            const movieData = res.data.results.filter(movie => movie.poster_path != null);
            this.setState({movies: movieData});
        }
        console.log(this.state.movies)
    })
    }

    render() {
        return (
            <div>
                <h1>Favorite Movie of All Time</h1>
                <form onSubmit={this.onSubmit}>
                    <input onChange={this.onChangeOne}/>
                    <div className="rec__container">
                        {this.state.movies && this.state.movies.slice(0,3).map(function(movie, genre_ids) {
                            return(
                                <div className="rec__sample">
                                    <img className="rec__img" src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} alt="movie poster"/>
                                    <p onClick={event => this.onClick(event)}>{movie.title}</p>
                                </div>
                            )
                        })}
                    </div>
                </form>
            </div>
        )
    }
}

export default Fav

1 Ответ

0 голосов
/ 23 марта 2020

Я вполне уверен, что проблема в том, что this в this.onClick не определено. Это происходит, когда он неправильно привязан к классу.

Я бы порекомендовал изменить функцию, объявленную после отображения, на функцию стрелки. 

<div className="rec__container">
  {this.state.movies &&
    this.state.movies.slice(0, 3).map((movie, genre_ids) => {
      return (
        <div className="rec__sample">
          <img className="rec__img" src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} alt="movie poster" />
          <p onClick={event => this.onClick(event)}>{movie.title}</p>
        </div>
      );
    })}
</div>;

Кроме того, вы привязываете функцию onClick в вашем конструкторе, а также используя его в качестве функции стрелки. Привязка не работает с функциями стрелок.

Либо удалите this.onClick = this.onClick.bind(this), либо преобразуйте onClick в простую функцию, а не функцию стрелки.

...