反应firebase从react route v params获取数据

时间:2017-06-12 07:30:29

标签: reactjs firebase

如何从firebase获取数据。我正在使用反应路由器v4。在详细信息页面中。 " this.props.match.params.movi​​e"这只是diplaying电影名称。我想从数据库中显示其他细节。需要帮助

componentDidMount() { 
    this.firebaseRef = firebase.database().ref("movies");
    this.firebaseRef.on('value', function (snapshot) {
        var movies = [];
        snapshot.forEach(function (data) {
            var movie = data.val();
            movie['.id'] = data.id;
            movies.push(movie);
        });
        this.setState({ movies });
    }.bind(this));
} 

Index.js页面

<Switch>
   <Route exact path="/" component={App} />
    <Route path="/create-movie" component={CreateMovie}/>
    <Route path="/details/:movie" component={Details} />
  </Switch>    

电影列表页

<div className="col-md-3">
  <Link to={"/details/" + movie.name}>
    <img src={movie.image} alt={movie.name} className="thumbnail"/>
  </Link>
</div>

1 个答案:

答案 0 :(得分:1)

在详细信息页面中,再次查询Firebase:

componentDidMount() { 
  this.firebaseRef = firebase.database().ref("movies");
  this.firebaseRef.on('value', (snapshot) => {
    snapshot.forEach((data) => {
      var movie = data.val();
      if (movie.name === this.props.match.params.movie) {
        this.setState({ movie });
      }
    });
  });
}