मेरी वेबसाइट में, यह वर्तमान में उपयोगकर्ताओं को उनके इनपुट के आधार पर फिल्मों की एक सूची दिखाता है।

जब उपयोगकर्ता प्रदान की गई फिल्म के शीर्षक पर क्लिक करता है, तो मैं सेटस्टेट करना चाहता हूं (चुना गया: फिल्म का शीर्षक उन्होंने क्लिक किया)।

वर्तमान में, जब मैं मूवी शीर्षक पर क्लिक करता हूं, तो यह निम्नलिखित बताते हुए एक त्रुटि देता है:

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

0
YLO 23 मार्च 2020, 16:54

1 उत्तर

सबसे बढ़िया उत्तर

मुझे पूरा यकीन है कि समस्या यह है कि 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>;

साथ ही, आप अपने कंस्ट्रक्टर में ऑनक्लिक फ़ंक्शन को बाध्य कर रहे हैं और साथ ही इसे एरो फ़ंक्शन के रूप में उपयोग कर रहे हैं। बाइंड एरो फंक्शन पर काम नहीं करता है।

या तो this.onClick = this.onClick.bind(this) को हटा दें या onClick को एरो फंक्शन के बजाय एक साधारण फंक्शन में बदल दें।

0
Hassaan Tauqir 23 मार्च 2020, 14:49