Question

我正在使用ReactJs和firebase。当我尝试将“喜欢数据”推入数据库时出现此错误。

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

我有一个Movie DB API，可用于获取并向用户显示电影信息。然后我使用Firebase身份验证登录，然后用户单击“赞”按钮，它将值1保存到数据库。

我是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

谢谢。

Answer 1

作为道具传递给AddLike组件的函数称为addMovieRecord，因此您需要调用this.props.addMovieRecord而不是this.props.likeMovie。

setState也是异步的，因此在更新后直接使用this.state.newMovieContent不会给您最新的价值。您可以改为在给addMovieRecord的回调中调用setState：

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

TypeError：this.props.likeMovie不是一个函数

1 个答案: