时间戳

首页 > 解决方案 > TypeError: this.props.likeMovie 不是函数

reactjs - TypeError: this.props.likeMovie 不是函数

问题描述

我正在使用 ReactJs 和 firebase。当我尝试将“like data”推送到数据库时出现此错误。

我想要的只是将电影设置为 1 而不是 0。

我有一个 Movie DB api，我用它来获取和显示电影信息给用户。然后我使用firebase身份验证登录，然后用户单击like按钮，它应该将值1保存到db。

我是 React 的新手，并不完全理解这些概念，所以如果它有些愚蠢，我很抱歉。

这是错误：

TypeError: this.props.likeMovie is not a function

AddLike.likeMovie

C:////

23 |        this.setState({
24 |            newMovieContent: 1,
25 |        })
> 26 |        this.props.likeMovie(this.state.newMovieContent);
27 |    }
28 | 
29 |    render(){

这是代码：

import React, { Component } from 'react';


class AddLike extends Component{
constructor(props){
    super(props);
    this.state = {
        newMovieContent: 0,
    };

    this.handleUserInput = this.handleUserInput.bind(this);
    this.likeMovie = this.likeMovie.bind(this);
}




likeMovie(){
    this.setState({
        newMovieContent: 1,
    })
    this.props.likeMovie(this.state.newMovieContent);
}

render(){
    return(

            <div>
            <button
            onClick={this.likeMovie}>Like</button>
        </div>   
    )
  }
   }

 export default AddLike;

电影行

addMovieRecord 正在添加值 1，稍后会有更多数据。（这就是为什么调用它而不是 addlike）

class MovieRow extends React.Component {

constructor(props, context) {
super(props, context);

this.addMovieRecord = this.addMovieRecord.bind(this);
this.removeMovie = this.removeMovie.bind(this);

this.app = fire;
this.database = this.app.database().ref().child('movies');

 this.state = {
  show: false,
  movies: [],
  };

   componentWillMount(){
  const previousMovies = this.state.movies;
 //ADD
  this.database.on('child_added', snap => {
  previousMovies.push({
    id: snap.key,
    movieRecord: snap.val().movieRecord,
  })
  this.setState({
    movies: previousMovies
     })
   })
     //REMOVE
      this.database.on('child_removed', snap => {
      for(var i=0; i < previousMovies.length; i++){
      if(previousMovies[i].id === snap.key){
        previousMovies.splice(i, 1);
      }
      }
      this.setState({
        movies: previousMovies
        })
        })
     }

       //ADD
        addMovieRecord(movie){
           this.database.push().set({movieRecord: movie});
      }
          //REMOVE
           removeMovie(movieId){
                this.database.child(movieId).remove();
     }

      render() {
        return <div key={this.props.movie.id}>
      <div className="row">
      <div className="col-md-4 card card-body">
        <img src={this.props.movie.poster_src} style={{width:'15em', height:'20em'}} 
      className="thumbnail" alt="Poster" />
       </div>
      <div className="col-md-8">
        <h2 className="mb-4">{this.props.movie.title}</h2>
        <ul className="list-group">
          <li className="list-group-item">
            <strong>Released:</strong> {this.props.movie.release_date}
          </li>
          <li className="list-group-item">
            <strong>Rated:</strong> {this.props.movie.popularity}
          </li>


          <li className="list-group-item">
          <AddLike addMovieRecord={this.addMovieRecord}/>
          {
        this.state.movies.map((movie) => {
          return (
            <Movie movieRecord={movie.movieRecord} 

            moviId={this.props.movie.id} 
            key={this.props.movie.id} 
            removeNote ={this.removeNote}/>
          )
        })
      }
          </li>

        </ul>

      </div>
    </div>
    <>
    <Button variant="primary" onClick={this.handleShow}>
      Show More Information
    </Button>

    <Modal show={this.state.show} onHide={this.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>{this.props.movie.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>{this.props.movie.overview}</Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={this.handleClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
     </>

    <hr/>






         </div>
       }
      }

     export default MovieRow

提前致谢。

标签： reactjsfirebase

解决方案

The function passed in as a prop to the AddLike component is called addMovieRecord, so you need to call this.props.addMovieRecord instead of this.props.likeMovie.

setState is also asynchronous, so using this.state.newMovieContent directly after updating it will not give you the latest value. You can call addMovieRecord in a callback given to setState instead:

likeMovie(){
    this.setState({
        newMovieContent: 1,
    }, () => {
        this.props.addMovieRecord(this.state.newMovieContent);
    });
}

推荐阅读